javascript - AngularJS 1.3 使用一次性绑定(bind)手动更新绑定(bind)

Question

我想在我的 View {{::vm.list}} 中使用一次性绑定(bind)。这一切都很好。但是，在单击按钮时，我希望 vm.list 刷新。

我似乎无法弄清楚如何手动触发 vm.list 进行更新。也许一次性绑定(bind)不是答案？

这是一个 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 状态，我觉得我可以开始推荐它了。

angular-bind-notifier

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

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

---

我认为 #2 将是满足您的需求的最佳方式，并且会像这样:

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

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

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

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

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

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

好了 - 您的 View 现已更新。

---

这是一个 jsBin展示两种更新方式(1 $watcher 和手动 $broadcast)。