AngualrJS 1.3使用一次绑定手动更新绑定

Question

我想在我的视图{{:: vm.list}}中使用一次性绑定.这一切都运作良好.但是在按钮上单击我想要vm.list刷新.

我似乎无法弄清楚如何手动触发vm.list进行更新.也许一次约束不是答案？

这是一个jsfiddle样板示例:http://jsfiddle.net/KamelJabber/e4nexvay/2/

(function () {
    var c1 = function Controller1() {
        var vm = this;
        var addCount = 1;
        vm.list = [{
            Id: 1,
            Text: "Blue One"
        }, {
            Id: 2,
            Text: "Blue Two"
        }, {
            Id: 3,
            Text: "Blue Three"
        }];

        vm.AddnRefresh = function () {
            vm.list.push({
                Id: vm.list.length,
                Text: "Add " + addCount
            });
            addCount++;

            //force a refresh of vm.list
        }
    };

    var app = angular.module('myApp', []);

    app.controller('Controller1', c1);
})();

<style> </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>

<div ng-app="myApp">
    <div ng-controller="Controller1 as vm">
        <p>
            <input type="button" ng-click="vm.AddnRefresh();" value="Add" />
        </p>
        <div ng-repeat="l in ::vm.list">{{::l.Text}}</div>
        <p></p>
        <div>LOTS of other stuff going on causing digest updates so really don't want to update list unless "Add" is called"</div>
    </div>
</div>

Answer 1

我参加聚会迟到了，但我还是会参加。

我已经在一个通知模块上工作了一段时间，它终于达到了 1.0.0 状态，我觉得我可以开始推荐它了。

角度绑定通知器

您可以通过两种方式使用它；

1. 为单个属性设置观察者以更新多个绑定。
2. $broadcast 手动刷新一次性绑定的事件。

我认为 #2 将是实现您正在寻找的最佳方式，这将是这样的：

<input type="button" ng-click="vm.AddnRefresh();" value="Add" />

<div ng-repeat="l in :refresh:vm.list">
  {{::l.Text}}
</div>

请注意在refresh一次性冒号之间添加的 。这是key您在想要触发数据刷新时将使用的。

您现在需要做的就是AddnRefresh像这样更新方法：

vm.addnRefresh = function () {
  /** original implementation **/
  $scope.$broadcast('$$rebind::refresh'); // where 'refresh' is the key used in the view. 
};

$$rebind:: 是 angular-bind-notifier 使用的内部事件命名空间。

好了，您的视图现已更新。

这是一个jsBin，展示了两种更新方式（1 $watcher 和手动 $broadcast）。

Answer 2

您必须使用$scope才能查看更新的视图。我刚刚将其添加vm到范围中。这是代码：

  (function () {
    var c1 = function Controller1($scope) {
       $scope.vm = this;
        var addCount = 1;
        $scope.vm.list = [{
            Id: 1,
            Text: "Blue One"
        }, {
            Id: 2,
            Text: "Blue Two"
        }, {
            Id: 3,
            Text: "Blue Three"
        }];

       $scope.vm.AddnRefresh = function () {
            $scope.vm.list.push({
                Id: $scope.vm.list.length,
                Text: "Add " + addCount
            });
            addCount++;

            //force a refresh of vm.list
        }

    };

    var app = angular.module('myApp', []);

    app.controller('Controller1', c1);
})();

您还必须删除::：

<div ng-app="myApp">
    <div ng-controller="Controller1 as vm">
        <p>
            <input type="button" ng-click="vm.AddnRefresh();" value="Add" />
        </p>
        <div ng-repeat="l in vm.list">{{::l.Text}}</div>
        <p></p>
        <div>LOTS of other stuff going on causing digest updates so really don't want to update list unless "Add" is called"</div>
    </div>
</div>