使用 $rootscope 在控制器之间更改 ng-show

Question

我想做的很简单。我有两种形式。一种形式在一开始是可见的，一旦提交该形式，它就会消失，而第二种形式出现。我正在尝试使用设置在 $rootscope.showFlag 的标志变量，但它似乎不起作用。

这是我的 HTML 部分：

<div ng-app="myapp" >
    <div class="container"  ng-controller="addItemController" ng-show="showFlag">

        <form class="form-signin">
            <h2 class="form-signin-heading">Add an item</h2>

            <input type="text" name="itemName" ng-model="myForm.itemName" id="inputItemName" class="form-control" placeholder="Name of the item" autofocus required>

            <button class="btn btn-lg btn-primary btn-block" ng-click="myForm.submitTheForm()">Add item</button>
        </form>

    </div> <!-- /container -->

      <div class="container"  ng-controller="MyCtrl" ng-show="!showFlag">
          <input type="text" ng-model="username"></br></br>
          <button class="btn btn-lg btn-primary btn-block" ngf-select ng-model="files">Select file</button>
      </div>
  </div>

这是我的 Angular 应用程序： </p> <pre><code>var app = angular.module("myapp", ['ngFileUpload']) .run(function($rootScope) { $rootScope.showFlag = true; }); app.controller("addItemController", function($rootScope, $scope, $http) { $scope.myForm = {}; $scope.showFlag = true; Data.Show = 10; $scope.myForm.submitTheForm = function(item, event) { console.log("--> Submitting form"); var dataObject = { itemName : $scope.myForm.itemName, }; var responsePromise = $http.post("/angularjs-post", dataObject, {}); responsePromise.success(function(dataFromServer, status, headers, config) { console.log(dataFromServer.title); //alert("Submitting form OK!"); $rootScope.showFlag = false; }); responsePromise.error(function(data, status, headers, config) { alert("Submitting form failed!"); }); } $scope.myForm.uploadPhoto = function(item, event) { console.log('Uploading photo'); } }); app.controller('MyCtrl', ['$scope', 'Upload', function ($rootScope, $scope, Upload) { $scope.$watch('files', function () { $scope.upload($scope.files); }); $scope.log = ''; $scope.upload = function (files) { if (files && files.length) { var file = files[0]; Upload.upload({ url: '/upload', fields: { 'username': $scope.username }, file: file }).progress(function (evt) { // during progress }).success(function (data, status, headers, config) { // after finishing }); } }; }]);

Answer 1

一个可能的原因是您拼错了控制器名称应该是 addSellItemController.

<div class="container"  ng-controller="addSellItemController" ng-show="showFlag">

另一个小错误是您没有在 MyCtrl 指令中添加 $rootScope 作为依赖项。

app.controller('MyCtrl', ['$rootScope','$scope', 'Upload', function ($rootScope, $scope, Upload) {
...
    });

Answer 2

您在两个地方将 showFlag 设置为 true。

在根范围内。

.run(function($rootScope) {
    $rootScope.showFlag = true;
});

并且在本地范围内。

app.controller("addItemController", function($rootScope, $scope, $http) {
    $scope.myForm = {};
    $scope.showFlag = true;

由于第一个表单的 ng-show 首先在本地范围内查找，即使您将 rootScope 标志设置为 false，它也不会受到影响。

使用 $rootscope 在控制器之间更改 ng-show

Using $rootscope to change ng-show between controllers

angularjs

angularjs-ng-show