0

我一个人想不出来这个。也许我错过了一些东西。我有一个控制器和一个创建自己的范围的指令。

Plunker 链接：http ://run.plnkr.co/plunks/wFV7d2blZKEXUgHIOxYo/

这是控制器代码，它只创建 3 个变量并为每个变量公开一个“更改”函数：

var myApp = angular.module("myApp",[]);

myApp.controller('MainController', function ( $scope, $rootScope ) {
  $rootScope.showStuff = true;
  $scope.showStuff2 = true;
  $scope.showStuffObj = { stuff : true };

  $scope.changeStuff = function () {
    $rootScope.showStuff = false;
  }

  $scope.changeStuff2 = function () {
    $scope.showStuff2 = false;
  }

  $scope.changeStuff3 = function () {
    $scope.showStuffObj.stuff = false;
  }
});

接下来是指令：

myApp.directive("mydirective", function () {
  return {
    scope : {
      showStuff : "=",
      showStuff2 : "=",
      showStuffObj : '='
    },
    restrict : "EA",
    template : "<h2>Running</h2>",
    link : function ( $scope ) {
      console.log("running directive", $scope);
      $scope.$watch("showStuff", function () {
        console.log($scope.showStuff);
      });

      $scope.$watch("showStuff2", function () {
        console.log($scope.showStuff2);
      });

      $scope.$watch("showStuffObj", function () {
        console.log($scope.showStuffObj);
      });
    }
  };
});

为什么我会得到这个？

控制台结果

如果双向绑定有效，我应该看到变量的真实值，而不是未定义的。为什么我更新变量时手表不更新？这非常令人困惑。

4

1 回答 1

1

有两个问题：

正如 beniwal 所说，指令中的属性必须用破折号分隔，而局部范围变量则采用驼峰命名法：

<mydirective show-stuff="showStuff" show-stuff2="showStuff2" show-stuff-obj="showStuffObj">

.

scope : {
  showStuff : "=",
  showStuff2 : "=",
  showStuffObj : "="
},

观看工作在 showStuffObj 的情况下，您必须 a) 深度观看对象，或直接观看属性。深度观察是昂贵的，所以只有在真的有必要时才这样做：

看单属性：

  $scope.$watch("showStuffObj.stuff", function () {
    console.log($scope.showStuffObj.stuff);
  });

深度观察：

  $scope.$watch("localShowStuffObj", function () {
    console.log($scope.localShowStuffObj);
  }, true);

watch 的第三个参数设置为 true 开启深度观看。

plnkr：http ://plnkr.co/edit/sxfIK16kTffxr4Z1R80s?p=preview

于 2013-06-17T08:11:53.957 回答