Question

我目前正在学习AngularJS。

我很难尝试在对象数据更新时更新我从指令生成的一系列按钮。

我已经阅读过一些帖子，解决类似问题，因为指令中未创建的数据不会更新到无效。

HTML

<body>
    <div id="application" data-ng-app="ApplicationDirective" ng-controller="ApplicationController" class="container-fluid">
        <side-panel class="col-lg-2"></side-panel>
        <div ng-controller="HomeController" class="content col-lg-10">

        </div>
    </div>
</body>

如您所见，我已经定义了2个控制器。 1 ApplicaitonControler来管理整个应用程序，然后是第二个HomeController来管理HMTL的内部部分。

然后我有一个指令，为侧面板生成一系列按钮。

var app = angular.module('ApplicationDirective', []);

app.directive("sidePanel", function() {
    return {
        restrict: "E",
        template : "<div>" +
                   "<input ng-repeat='btn in sidePanelButtons' type='button' value={{btn.value}}>" +               
                   "</div>"
    };
});

上述$scope数据在ApplicationContoller中定义。然后我更新HomeController中的数据。

app.controller("HomeController", function($scope) {
    $scope.sidePanelButtons = $scope.sidePanelButtons.concat([
        {value:"TEST"}
    ]);
});

此时，如果我记录sidePanelButtons var，那么我可以看到数据已成功附加，但HTML中的任何内容都没有更改？。

我尝试过使用$ scope。$ apply方法，但我得到error。

我可能有错误的设计方法，所以任何帮助都会受到赞赏。

Answer 1

concat()方法返回一个新数组。

所以当你这样做时

$scope.sidePanelButtons = $scope.sidePanelButtons.concat([
    {value:"TEST"}
]);

您在HomeController范围内创建了新的sidePanelButtons属性，从而打破了sidePanelButtons范围内ApplicationController数组的引用。您的侧面板指令正在观察ApplicationController范围，该范围未经修改。

改为$scope.sidePanelButtons.push()。

Answer 2

试试这个

var app = angular.module('myApp', []);

app.directive("sidePanel", function() {
    return {
        restrict: "E",
        scope: {
        	buttons: '='
        },
        template : "<div>" +
                   "<input ng-repeat='btn in buttons' type='button' value={{btn.value}}>" +               
                   "</div>"
    };
});

app.controller("ApplicationController", function($scope) {
		$scope.sidePanelButtons = [
        {value:"TEST"}
    ];
});

Answer 3

您无法从另一个控制器更新一个控制器的$ scope。 $ scope对于每个控制器都是本地的，因此日志中显示的更新值属于HomeController，而不属于ApllicationController。您可以在同一个控制器中定义和更新数据，或者如果您真的需要从两个控制器访问相同的数据集，则使用服务。

另一种方法是使用$ rootScope而不是$ scope使其在所有控制器中都可用。

app.controller("HomeController", function($scope, $rootScope) {
$rootScope.sidePanelButtons = $rootScope.sidePanelButtons.concat([
    {value:"TEST"}
]);
});

app.controller("ApplicationContoller", function($scope, $rootScope) {
$rootScope.sidePanelButtons = //define here; 
});

但我认为您的指令还有另一个问题。您需要从指令访问控制器$ scope以访问sidePanelButtons等变量。要解决该问题，请参阅：Access controller scope from directive

更新数据更改的重复次数

3 个答案: