从外部控制角度指令

Question

我正在尝试从我的主控制器更改指令。

这是指令代码

# directive.coffee
application.directive 'btnState', ->
    {
        restrict: 'A'
        link: (scope, el, attrs) ->
            attrs.$observe 'ngModel', (newVal) ->
                switch newVal
                    when 'loading'
                        # do something
                    when 'reset'
                        # do other thing
            el.click (event) ->
                attrs.$set 'ngModel', 'loading'
            return
    }

现在在我的模板中

<button id="#do-btn" ng-click="doSometing()" ng-model="ns.btn_state" btn-state>Do it</button>
<button id="#cancel-btn" ng-click="ns.btn_state = 'reset'">Cancel</button>

当我点击 #do-btn 按钮工作正常时，$observe 捕捉到变化，但是当我尝试从外部更改 ns.btn_state 时永远不会捕捉到

我该如何解决这个问题？

我正在使用角度 1.0.7

Answer 1

小心，attrs.$observe 和 attrs.$set 用于操作给定属性的值，而不是内容。

如果您关心内容，您应该在属性的值上使用$watch 和$parse。

例如

<input ng-model="foo" />

与

$scope.foo = "bar";

属性'ngModel'的值为"foo"，其内容为"bar"。

如果您不希望属性的 value 发生变化，即不对其进行插值，以便读取/写入模型的 content它代表你可以做到

var model = $parse(attrs.foo);
var content = model(scope); // read
scope.$apply(function () {
  model.assign(scope, 'new content'); // write
});

并对变化做出反应

scope.$watch(attrs.foo, function (new, old) { ... });

如果你的属性是插值的，那么你应该在观察和解析它之前$observe它，但这似乎是一个非常复杂的用例。