AngularJS 中的指令在加载时触发 $watch 回调函数答案

【问题标题】：Directive in AngularJS is firing $watch callback functions on loadAngularJS 中的指令在加载时触发 $watch 回调函数
【发布时间】：2014-03-04 02:09:58
【问题描述】：

我有以下指令：

  leafletDirective = angular.module("leaflet-directive", [])
  leafletDirective.directive "leaflet", ($http, $log)  ->
    restrict: "E"
    replace: true
    transclude: true
    template: "<div id=\"map\"></div>"
    scope:
      origin: "=origin"
      points: "=points"
      shape: "=shape"
      clearmarkers: "=clearmarkers"
      markers: "=markers"
    link: (scope, element, attrs, ctrl) ->

      scope.origin = [40.094882122321145, -3.8232421874999996]
      scope.points = []
      scope.shape = []
      #create a CloudMade tile layer and add it to the map
      @map = L.map(attrs.id,
                  center: scope.origin
                  zoom: 5
      )
      L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
                maxZoom: 18
      ).addTo @map


      #add markers dynamically
      updateMarkers = (pts) =>
        console.log "loading markers"
        scope.markers = []
        for p of pts
          lat = pts[p].lat
          lng = pts[p].lng
          latLng = new L.LatLng(lat,lng)
          marker = new L.marker(latLng).addTo(@map)
          scope.markers.push(marker)
        return scope.markers

      #/// Add Polygon
      updateShape = (points) ->
        console.log "loading shape"

      #///Watch for point changes///##
      scope.$watch attrs.points,( (value) ->
        updateMarkers value
      ), true


      #//Watch For Shape Changes///###
      scope.$watch attrs.shape,( (value) ->
        updateShape value
      ), true

我发现在页面上加载我的观察者

      #///Watch for point changes///##
      scope.$watch attrs.points,( (value) ->
        updateMarkers value
      ), true


      #//Watch For Shape Changes///###
      scope.$watch attrs.shape,( (value) ->
        updateShape value
      ), true

正在加载...我从它们加载的函数中看到这些消息。这是关闭的，因为两个 attrs 都没有改变。

这就是我加载 Angular 的方式：

app = angular.module("WhereToMeet", ["leaflet-directive"])

@MapCtrl = ($scope) ->

  $scope.clicked = ->
    $scope.points.push(
      {lat: 1, lng: 2}, {lat: 40.094882122321145, lng: -3.8232421874999996}
    )


  $scope.clear = ->
    $scope.clearmarkers($scope.markers)

  $scope.makeShape = ->
    $scope.shape = []
    $scope.shape = ["1"]

我无法弄清楚为什么它会在页面加载时加载。数据不变。除非 - 它只是被创建会这样做 - 我需要绕过。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

在观察者注册到作用域后，监听器 fn 被异步调用（通过 $evalAsync）来初始化观察者。在极少数情况下，这是不可取的，因为当 watchExpression 的结果没有改变时调用了侦听器。要在侦听器 fn 中检测这种情况，您可以比较 newVal 和 oldVal。如果这两个值相同（===），则由于初始化而调用了侦听器。 -- Scope#$watch

【讨论】：

【解决方案2】：

我已将我的 $watch 语句简化为：

scope.$watch('someVar', function(newVal) {
  if (newVal) {
    // now, it's time to do something with scope.someVar
  }
});

【讨论】：

我也经常用这个。但是，我发现如果用户删除所有内容（大概是为了删除过滤），它可能会导致搜索/过滤框等问题。在这种情况下，由于someVar 现在将是一个空白字符串，并且“falsey”，因此不会发生任何操作。并不总是有问题，但需要注意。