gpt4 book ai didi

angularjs - 从 Controller 更新指令变量

转载 作者:行者123 更新时间:2023-12-01 02:15:28 25 4
gpt4 key购买 nike

AngularJS 新手我有一个简单的指令、服务和 Controller 。我遍历指令中嵌入的 Controller 中的数据库中的项目列表,以呈现项目的复选框列表。从表格中,我可以更新数据库中的项目列表。同时我想用新添加的项目更新我的显示项目列表,并希望从 Angulars 双向绑定(bind)中受益,但我不知道如何......

我的指令:

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>

我现在的问题是,如果我使用此 Controller 添加新项目

编辑:在我的页面上我有两件事。 1:使用上述指令呈现的项目列表和 2:具有单个输入字段的简单表单。我输入一个新的 menuItem 并单击“保存”。这会触发下面的 Controller 被新的 menuItem 调用。然后将 menuItem 添加到我的数据库中的集合中,但我希望我的页面上的列表使用新添加的项目进行更新。最好不必重新加载整个页面。
    $scope.insertMenuItem = function () {
$http.post('/menuItems', $scope.formData)
.success(function (data) {
$scope.items = data;
});
};

然后我的指令中的“me.items”保持不变,因此我的浏览器中的列表也是如此。

我如何“将它们捆绑在一起”,以便当我调用 insertMenuItem 时 my.items 会自动更新?

这并没有像我希望的那样出来,但我希望你明白这个意思......

提前致谢

最佳答案

看看这个http://jsbin.com/rozexebi/1/edit ,它展示了如何将指令中的项目列表绑定(bind)到 Controller ,希望对您有所帮助。

关于angularjs - 从 Controller 更新指令变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25144444/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com