Question

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

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

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

＆＃13;

(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);
})();

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我很晚才参加聚会，但我还是会参与其中。

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

angular-bind-notifier

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

为单个属性设置观察程序以更新多个绑定。
$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 $观察者和手动广播）。

Answer 2

如果重新创建父DOM元素，Angular将重新渲染视图。您可以结合使用ng-if，范围变量和$ timeout服务来实现此目的：

查看：

<div ng-if="!vm.status.reqRefresh"> <div ng-repeat="l in ::vm.list">{{::l.Text}}</div> </div>

<强>控制器：

vm.status = { reqRefresh : false }; vm.AddnRefresh = function () { vm.list.push({ Id : vm.list.length, Text : "Add " + addCount }); addCount++; //force a refresh of vm.list vm.status.reqRefresh = true; $timeout(function () { vm.status.reqRefresh = false; }); }

请在此处查看更新的小提琴：http://jsfiddle.net/karank007/e4nexvay/143/

Answer 3

您必须使用$scope查看更新后的视图。我刚刚将vm添加到了Scope中。这是代码：

  (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>

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

3 个答案: