Question

我开始学习Angular并面对一些奇怪的行为。

我想动态地为手风琴添加一个新的标题，但我手风琴并没有在UI上反映它，直到我明确点击他的一些项目。由于某种原因，在开始加载之前，他没有对项目更改做出反应。

var mainApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngResource']);
mainApp.factory('teamSharedObj',['$rootScope', function($rootScope) {
    return {
        teams: [],
        peopleInTeam: [],
        addNewTeam: function(item) {
            console.log("add new team: " + item);
            this.teams.push(item);
            $rootScope.$broadcast('team.new');
        },
        addTeamMembers: function(team, teamMembers) {
            for (var i = 0; i < teamMembers.length; i++) {
                var temp;
                // put in team as key-value pair
                temp[team] = teamMembers[i]
                console.log("add new team member: " + temp);
                peopleInTeam.push(temp);
            }
            if (teamMembers.length != 0) {
                $rootScope.$broadcast('teamMember.new');
            }
        }
    }
}]);

mainApp.directive("addNewTeam", ['teamSharedObj', 'teamSharedObj', function (teamSharedObj) {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            element.bind('click', function() {
                console.log(scope.teamName)
                teamSharedObj.addNewTeam(scope.teamName)
            });
        }
    }
}])

mainApp.controller('teamListCtrl', ['$scope', 'teamSharedObj', function($scope, teamSharedObj) {
    $scope.$on('team.new', function(event) {
            console.log('new team ' + event);
            $scope.items = teamSharedObj.teams;
        }
    );
    $scope.oneAtATime = true;
    $scope.items = ['new', 'another one'];//teamSharedObj.teams;
}]);


<!DOCTYPE html>
<html>
<head lang="en">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="js/test.team.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">



</head>
<body ng-app="ui.bootstrap.demo">

    <div id="teamBlock">
        <input type="text" ng-model="teamName" >
        <input add-new-team type="submit" value="Add new team" >
        <!--<button add-book-button>Add data</button>-->
    </div>

    <div>
        {{teamName}}
    </div>

    <div ng-controller="teamListCtrl">
        <accordion close-others="oneAtATime" >
            <accordion-group heading="{{d}}" ng-repeat="d in items">
                This content is straight in the template.

            </accordion-group>
        </accordion>

        <div ng-repeat="item in items">{{item}}</div>
    </div>



</body>
</html>

您能否以正确的方式向Notifu组件提出有关其数据源更改的建议？

Answer 1

bind是jqLite / jQuery方法，不会自动为您触发摘要循环。这意味着不会进行脏检查，并且不会更新UI以反映模型更改。

要触发它，请在调用$apply：

时手动包装代码

element.bind('click', function() {
  scope.$apply(function () {
    teamSharedObj.addNewTeam(scope.teamName);
  });
});

由于teamSharedObj包含对数组的引用，因此控制器可以直接引用它。那么您不需要使用$broadcast：

addNewTeam: function(item) {
  this.teams.push(item);
},

和

mainApp.controller('teamListCtrl', ['$scope', 'teamSharedObj',
  function($scope, teamSharedObj) {

    $scope.oneAtATime = true;
    $scope.items = teamSharedObj.teams;
  }
]);

演示： http://plnkr.co/edit/ZzZN7wlT10MD0rneYUBM?p=preview

当数据源发生变化时，Angular accordion不会更新UI

1 个答案: