对于AngularJS,我有一个简单的指令、服务和控制器。我在指令中嵌入的控制器中循环遍历数据库中的项列表,以呈现项的复选框列表。从一个表单,我能够更新我的项目列表在数据库中。同时,我想用新添加的项目更新我的显示项目列表,并希望从angular的双向绑定中受益,但我不知道如何…
我的指令:
angular.module('myModule').directive('menu', function (menuService) {
return {
restrict: 'E',
templateUrl: '../templates/menu.html',
controller: function () {
var me = this;
menuService.getMenuItems().then(function(data) {
me.items = data;
});
},
controllerAs: 'menu'
};
});
和相应的html:
<div ng-repeat="item in menu.items">
<div class="col-md-4" ng-if="item.menuItem">
<div class="checkbox">
<label for="{{item._id}}">
<input id="{{item._id}}" type="checkbox" name="menuItems" ng-model="menuItems[$index]" ng-true-value="{{item._id}}">
{{item.menuItem}}
</label>
</div>
</div>
</div>
我现在的问题是,如果我使用这个控制器添加一个新项目
编辑:在我的页面上我有两件事。1:使用上面的指令呈现的项目列表;2:带有单个输入字段的简单表单。我输入一个新的菜单项,然后点击"保存"。这会触发下面的控制器被新的menuItem调用。然后将menuItem添加到数据库中的集合中,但我希望页面上的列表使用新添加的项目进行更新。最好不需要重新加载整个页面
$scope.insertMenuItem = function () {
$http.post('/menuItems', $scope.formData)
.success(function (data) {
$scope.items = data;
});
};
然后是"我"。我的指令中的Items "保持不变,因此我的浏览器中的列表也保持不变。
我如何"将它们结合在一起",以便当我调用insertMenuItem时,我的。项目自动更新?
这个结果没有我希望的那么好,但我希望你能明白我的意思…
Thanks in advance
看看这个http://jsbin.com/rozexebi/1/edit,它展示了如何将指令中的项列表绑定到控制器,希望对您有所帮助。