取消隐藏一个数据绑定的东西(ng-model或{{food.Foo}})会破坏绑定

Question

我的问题:我可以很好地修改我的模型，并且更改反映在我的视图中，只要我的视图是隐藏的。一旦我的视图被取消隐藏，从超时，事件处理程序等对scope.food.foo所做的更改就不再适用。这些都在指令中。

锅炉舱顶棚:http://jsfiddle.net/9T9qE/1/

I am使用对象作为模型(而不是使用作用域作为模型，这会导致继承问题)，也就是说，我使用scope.food.foo而不是简单地使用scope. foodfoo

html:

<div ng-app="myApp">
    <my-directive></my-directive>
</div>

js:

myApp = angular.module("myApp", []);
myApp.directive("myDirective", function() {
    var d = {};
    d.restrict = "E";
    d.template = '<div ng-show="food.show">hi, I like <input type="text" ng-model="food.foo">   and, in case you forgot, that's {{food.foo}}</div><button ng-click="food.show = true">show me</button>';
    d.link = function(scope, element, attrs) {
        scope.food = {};
        scope.food.foo = "pie";
        scope.food.show = false;
        setTimeout(function() {
            alert("timeout: setting scope.food.foo = 'cake'");
            scope.food.foo = "cake";
        }, 6000);
    };
    return d;
});

Answer 1

如何告诉AngularJS "refresh"

看起来答案是scope.$appy() -这对我来说很有效。http://jsfiddle.net/XR9s2/1

    setTimeout(function() {
        alert("timeout: setting food.foo = 'cake'");
        scope.$apply(function() { food.foo = "cake"; });
    }, 6000);

这篇文章，参考了上面的问题，也帮助了我:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

编辑:从那篇文章:

有时我看到数据更新的例子，然后调用$scope.$apply()，不带参数。这达到了预期的结果，但是失去了一些机会。

如果你的代码没有被封装在传递给$apply的函数中，并且它抛出了一个错误，这个错误会在AngularJS外部抛出，这意味着你的应用中使用的任何错误处理都将错过它。$apply不仅运行您的代码，而且它在try/catch中运行，因此您的错误总是被捕获，并且$digest调用在finally子句中，这意味着无论抛出错误，它都将运行。真不错。

我修改了上面的代码来反映这一点:而不是改变值，然后使用scope.$apply()，我使用scope.$apply(function() {/* change value */});