Question

我使用ui-router根据需要路由到特定的子页面：

var myApp = angular.module("myApp",['ui.router']);
    myApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('usergroups', {
  url: "/usergroups",
  templateUrl: "pages/usergroups.html",
  controller : 'UsergroupsCtrl'
  })
  .state('usergroups.create', {
  url: "/create",
  templateUrl: "pages/usergroups.new.html",
  controller : 'UsergroupsCtrl'
  })

...

这是我的usergroups.html：

  <body>
    <h3>User Groups</h3><br/>

    <button class="fon-btn" type="button" ng-hide = "toAdd" ng-click="toAdd = true"  ui-sref="usergroups.create">Create New Group</button>  
    <div ui-view></div>
      <ul>
        <li class="bitcard padding10" ng-repeat="group in usergroups">
            <span class="padding10"><strong>{{group.name}}</strong></span>
        </li>
        </ul>
  </body>

和usergroups.new.html：

<body>
<form ng-submit="add()">
      <input class="btn" type="submit" value="Add Usergroup"><br/><br/>
      </form>
</body>

当我点击Add Usergroup时，它会从add()调用UsergroupsCtrl：

$scope.add = function() {
    $scope.usergroups.push({name:$scope.name});
    console.log($scope.usergroups);
    }

控制台显示$scope.usergroups已更新。但不知何故{@ 1}}：usergroups.html没有更新视图。我添加ng-repeat="group in usergroups"和$scope.$apply()但收到错误：

$申请已在进行中

但如果我不使用$scope.$digest()，一切正常。我该如何解决这个问题？

Answer 1

我认为同一个$scope不能用于两个不同的控制器。你可以把它改成$ rootScope。比如$rootScope.usergroups.push()。这SO可能会对您有所帮助。您也可以使用$stateParam。

angularjs - 更新数组但使用ui-router时视图未更新

1 个答案: