如何在AngularJs中进行双向绑定？详细示例包括

Question

我无法独自思考这一点。也许我错过了什么。我有一个控制器和一个指令，它创建自己的范围。

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);
      });
    }
  };
});

为什么我会这样？

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

Answer 1

有两个问题：

正如beniwal所说，指令中的属性必须用破折号分隔，而局部范围变量在camelCase中：

<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