从控制器更新指令变量

时间:2014-08-05 17:03:07

标签: angularjs angularjs-directive angularjs-controller

AngularJS新手我有一个简单的指令,服务和控制器。我遍历指令中嵌入的控制器中的数据库项目列表,以呈现项目的复选框列表。从表单中我可以更新数据库中的项目列表。我同时希望用新添加的项目更新我显示的项目列表,并希望受益于Angulars双向绑定,但我无法弄清楚如何......

我的指示:

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并单击&#34; Save&#34;。这会触发下面的控制器用新的menuItem调用。然后将menuItem添加到我的数据库中的集合中,但我希望我的页面上的列表使用新添加的项目进行更新。最好不必重新加载整个页面。

    $scope.insertMenuItem = function () {
    $http.post('/menuItems', $scope.formData)
        .success(function (data) {
            $scope.items = data;
        });
};
然后是&#34; me.items&#34;在我的指令中保持不变,因此我的浏览器中的列表也是如此。

我如何将它们捆绑在一起&#34;所以当我调用insertMenuItem时,my.items会自动更新吗?

这并没有像我希望的那样出现,但我希望你能理解......

提前致谢

1 个答案:

答案 0 :(得分:2)

看一下这个http://jsbin.com/rozexebi/1/edit,它展示了如何将指令中的项目列表绑定到控制器,希望它有所帮助。