Question

我当前在指令中使用$observe观察属性值，因为我更改了调用回调的属性值，当我然后更改$scope变量时，它不是“更新”的我认为这是因为我需要使用$apply，在调用$apply时，我收到的错误$rootScope:inprog似乎是因为$observe？

简单地说，如何从$ observe？

中更新$ scope变量

我的代码（咖啡）：

App.directive "reactiveButton", () ->
  directive = {}

  directive.restrict = "E"
  directive.scope =
    translateId: '@translateId'
    loadingIndicator: '@loadingIndicator'
  directive.templateUrl = App.Base.concat("directive/reactive-button.html")
  directive.link = ($scope, $elements, $attrs) ->  

    $attrs.$observe 'translateId', (value) ->
      $scope.$apply () ->
        $scope.translateId = value

    $attrs.$observe 'loadingIndicator', (value) ->
      $scope.loadingIndicator = Boolean value

  return directive

Answer 1

在此示例中，您的$ observe块是多余的。您已经设置了一个隔离范围，用于将translateId分配给范围，因此您可以将其删除。

“未更新”是什么意思？

在reactive-button.html中，您应该可以通过将其放在某个位置来查看translateId的值：{{translateId}}

^应该更改以反映您的属性。

Answer 2

您不需要在$apply听众中$observe您的范围：它将在一个digect周期中被触发。

正如您所做的更新应该足够了，请复制并解释您在执行此操作时遇到的问题。

Answer 3

directive.scope =
  translateId: '@translateId'
  loadingIndicator: '@loadingIndicator'

这部分告诉AngularJS创建一个隔离的范围。 AngularJS将为这些属性创建该指令属性的观察者。每当这些属性发生变化时，它都会更新范围。你不必观察它们。

    App.directive "reactiveButton", () ->
      directive = {}

      directive.restrict = "E"
      directive.scope =
        translateId: '@translateId'
        loadingIndicator: '@loadingIndicator'
      directive.templateUrl = App.Base.concat("directive/reactive-button.html")
      return directive

你的指令并不需要链接功能，因为它没有任何其他功能（此时）。模板reactive-button.html仍可使用translateId和loadingIndicator绑定。

使用$ apply观察Angular $

3 个答案: