我有两个控制器,并使用app.factory函数在它们之间共享数据.
第一个控制器在单击链接时在模型数组(pluginsDisplayed)中添加一个小部件.小部件被推入阵列,此更改将反映到视图中(使用ng-repeat显示数组内容):
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
该小部件基于三个指令构建,k2plugin,remove和resize.remove指令将span添加到k2plugin指令的模板中.单击所述span时,将删除共享数组中的右元素Array.splice().共享阵列已正确更新,但更改未反映在视图中.但是,添加另一个元素后,在删除后,视图将正确刷新,并且不会显示先前删除的元素.
我错了什么？你能解释一下为什么这不起作用吗？有没有更好的方法来做我想用AngularJS做的事情？
这是我的index.html:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="livePlugins">
<div ng-controller="pluginlistctrl">
<span>Add one of {{pluginList.length}} plugins</span>
<li ng-repeat="plugin in pluginList">
<span><a href="" ng-click="add()">{{plugin.name}}</a></span>
</li>
</div>
<div ng-controller="k2ctrl">
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
</div>
</div>
</body>
</html>
这是我的main.js:
var app = angular.module ("livePlugins",[]);
app.factory('Data', function () {
return {pluginsDisplayed: []};
});
app.controller ("pluginlistctrl", function ($scope, …angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我想如果我打ng-controller="GeneralInfoCtrl"了我的DOM中的多个元素,他们会共享相同的$scope(或者至少双向绑定不起作用).
我想这样做的原因是因为我在HTML的不同部分有不同的只读视图和相关的模态对话框,并且它们不共享共同的祖先(除了<body>和<html>).
有没有办法让两个控制器引用相同的对象/ make数据绑定在它们之间工作？
以下是那些坚持看到标记的代码,用Jade编写:
.client-box(ng-controller="GeneralInfoCtrl")
.box-header
.box-title
h5 General Information
.box-buttons
button.btn.btn-small(data-target='#editGeneralInfo', data-toggle='modal', data-backdrop='static') <i class="icon-pencil"></i> Edit
.box-body
table.table.table-tight.table-key-value
tr
th Name
td {{client.fullName()}}
tr
th Also Known As
td {{client.aka}}
tr
th Birth Date
td {{client.birthDate|date:'mediumDate'}}
...
#editGeneralInfo.modal.hide.fade(ng-controller="GeneralInfoCtrl")
.modal-header
button.close(type='button', data-dismiss='modal') ×
h3 Edit General Information
.modal-body
form.form-horizontal.form-condensed
.control-group
label.control-label First Name
.controls
input(type='text', placeholder='First Name', ng-model='client.firstName')
.control-group
label.control-label Last Name
.controls
input(type='text', placeholder='Last Name', ng-model='client.lastName') …我正在尝试在添加注释时使angular.js视图更新.我的代码如下:
<div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant>
<div>
<p>
<span class="username">{{comment.user}}</span> {{comment.message}}
</p>
<p class="time">
10 minutes ago
</p>
</div>
</div>
<div class="comment reply">
<div class="row-fluid">
<div class="span1">
<img src="assets/img/samples/user2.jpg" alt="user2" />
</div>
<div class="span11">
<textarea class="input-block-level addComment" type="text" placeholder="Reply…"></textarea>
</div>
</div>
</div>
范围在输入时更新:
$('.addComment').keypress(function(e) {
if(e.which == 10 || e.which == 13) {
$scope.currentItem.comments.push({
"user": "user3",
"message": $(this).val()
});
console.debug("currentItem", $scope.currentItem);
}
});
调试$ scope.currentItem显示已添加注释,但视图不显示新注释.我怀疑$ scope仅在第一级被监视,这就是视图不更新的原因.那是这样吗？如果是这样,我该如何解决？
解决方案:正如Ajay在下面的回答中建议的那样,我将数组推送到apply函数中,如下所示:
var el=$(this);
$scope.$apply(function () {
$scope.currentChallenge.comments.push({
"user": $scope.currentUser,
"message": …