angularjs 指令不随范围更新。$watch答案

【问题标题】：angularjs directive not upating with scope.$watchangularjs 指令不随范围更新。$watch
【发布时间】：2015-08-25 05:41:27
【问题描述】：

我正在尝试基于控制器变量来集中输入。它在控制台中正确初始化打印值= false，并且控制器正在视图中更新变量，但指令中没有。我使用jade/coffeescript 或Id 创建了一个示例，但差不多就是这样：

控制器

$scope.autofocus = false

$scope.somefunction = ->
  $scope.autofocus = true

指令。

'use strict'

angular.module('myapp')
.directive 'gsautofocus', ($timeout, $parse) ->
    {
    link: (scope, element, attrs) ->
        model = $parse(attrs.gsautofocus)
        scope.$watch model, (value) ->
            console.log 'value=', value
            if value == true
                $timeout ->
                    element[0].focus()
                    return
            return
    }

查看

input(type="text", gsautofocus="{{autofocus}}")

【问题讨论】：

somefunction 的电话在哪里？
在提交表单时，即被调用并将 autofocus 的值设置为 true，但指令不是 console.logging 值更改
是否正确触发了摘要？你能显示表单的提交代码吗？

标签： angularjs angularjs-directive coffeescript pug

【解决方案1】：

您应该在属性上使用$observe，就像您要评估每个摘要上的插值包含一样，$watch 不适用于插值。

$观察

$observe(key, fn);

观察一个插值属性。观察者函数将在下一次 $digest 期间被调用一次以下编译。然后每当插值变化。

代码

'use strict'

angular.module('myapp')
.directive 'gsautofocus', ($timeout) ->
    {
    link: (scope, element, attrs) ->
        attrs.$observe 'gsautofocus', (value) ->
            console.log 'value=', value
            if value == true
                $timeout ->
                    element[0].focus()
                    return
            return
    }

【讨论】：