Javascript 数据更改时更新ng repeat_Javascript_Html_Angularjs

Javascript 数据更改时更新ng repeat

javascript html angularjs

Javascript 数据更改时更新ng repeat,javascript,html,angularjs,Javascript,Html,Angularjs,我目前正在学习AngularJS 当对象数据更新时，我一直在尝试更新一系列由指令生成的按钮我读过很多文章，都提到了类似的问题，因为没有在指令中创建的数据不会更新到无效的位置 HTML <body> <div id="application" data-ng-app="ApplicationDirective" ng-controller="ApplicationController" class="container-fluid"> <si

我目前正在学习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>

上述的

$scope

数据在

应用程序调用程序中定义。然后我更新HomeController
中的数据
app.controller("HomeController", function($scope) {
    $scope.sidePanelButtons = $scope.sidePanelButtons.concat([
        {value:"TEST"}
    ]);
});

此时，如果我记录sidePanelButtons变量，则可以看到数据已成功追加，但HTML中没有任何更改
我尝试过使用$scope.$apply方法，但是我得到了一个
我可能有错误的设计方法，因此如果有任何帮助，我们将不胜感激。
该方法返回一个新数组
所以当你这么做的时候
$scope.sidePanelButtons = $scope.sidePanelButtons.concat([
    {value:"TEST"}
]);

您正在HomeController作用域中创建一个新的sidePanelButtons
属性，打破了对ApplicationController
作用域中sidePanelButtons
数组的引用。您的侧面板指令正在监视未更改的ApplicationController
范围
改为执行$scope.sidePanelButtons.push（）
。
该方法返回一个新数组
所以当你这么做的时候
$scope.sidePanelButtons = $scope.sidePanelButtons.concat([
    {value:"TEST"}
]);

您正在HomeController作用域中创建一个新的sidePanelButtons
属性，打破了对ApplicationController
作用域中sidePanelButtons
数组的引用。您的侧面板指令正在监视未更改的ApplicationController
范围
改为使用$scope.sidePanelButtons.push（）
。
试试这个

var-app=angular.module（'myApp'，[]）；
应用指令（“侧面板”，函数（）{
返回{
限制：“E”，
范围：{
按钮：'='
},
模板：“”+
"" +               
""
};
});
app.controller（“ApplicationController”，函数（$scope）{
$scope.sidePanelButtons=[
{value:“测试”}
];
});试试这个

var-app=angular.module（'myApp'，[]）；
应用指令（“侧面板”，函数（）{
返回{
限制：“E”，
范围：{
按钮：'='
},
模板：“”+
"" +               
""
};
});
app.controller（“ApplicationController”，函数（$scope）{
$scope.sidePanelButtons=[
{value:“测试”}
];
});不能从另一个控制器更新一个控制器的$scope$作用域对于每个控制器都是本地的，因此日志中显示的更新值属于HomeController而不是ApplicationController。如果确实需要从两个控制器访问同一组数据，可以在同一控制器中定义和更新数据，也可以使用服务
另一种方法是使用$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之类的变量。有关该问题的解决方案，请参阅：
您不能从另一个控制器更新一个控制器的$scope$作用域对于每个控制器都是本地的，因此日志中显示的更新值属于HomeController而不是ApplicationController。如果确实需要从两个控制器访问同一组数据，可以在同一控制器中定义和更新数据，也可以使用服务
另一种方法是使用$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之类的变量。有关该问题的解决方案，请参考：
作为快速提示：请改为尝试$timeout
。它正在自动执行一个$scope.$apply
。作为一个快速提示：改为尝试一个$timeout
。它正在自动执行一个$scope.$apply
。这很有趣，很有意义，我会尽快测试它。所以我刚刚测试了这个，它有点工作，但是现在我有了3个原始按钮和一个空白按钮，尽管我试图将2个新值推到对象中<代码>$scope.sidePanelButtons.push（[{value:TEST1}，{value:TEST2}]）
@Zze我不知道你的ng repeat
迭代了什么，但理想情况下你应该按下像$scope.sidePanelButtons.push这样的对象（{value:“TEST1”}，{value:“TEST2”}）而不是对象数组。图例！我的语法错误，将这些方括号保留在中。接得好。干杯。啊，啊，啊，啊，有趣，这很有道理，我会尽快测试。所以我刚刚测试了这个，它有点工作，但是现在我有3个原始按钮和一个空白按钮，即使我尝试将2个新值推到对象中<代码>$scope.sidePanelButtons.push（[{value:TEST1}，{value:TEST2}]）
@Zze我不知道你的ng repeat
迭代了什么，但理想情况下你应该按下像$scope.sidePanelButtons.push这样的对象（{value:“TEST1”}，{value:“TEST2”}）而不是对象数组。图例！我的语法错误，将这些方括号保留在中。接得好。干杯，这不是真的。子作用域通常从父作用域继承，因此它们可以更新父作用域上的对象属性。当Angular计算{variable}}时，它首先查看与给定元素关联的作用域的name属性。如果没有找到这样的属性，它将搜索父作用域，依此类推，直到到达根作用域。在JavaScript中，这种行为称为原型继承，子作用域原型继承自其父作用域。但事实并非如此。在控制器内时，$scope指的是本地副本。如果c