Как я могу сделать двустороннюю привязку в AngularJs? Подробный пример включен

Я не могу понять это самостоятельно. Может быть, я что-то упускаю. У меня есть контроллер и директива, которая создает свою собственную область.

Ссылка на планкер: 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);
      });
    }
  };
});

Почему я получаю это?

результаты консоли

Если двусторонняя привязка работает, я должен видеть реальные значения переменных, а не undefined. Почему часы не обновляются, когда я обновляю переменные? Это очень сбивает с толку.


angularjs angularjs-directive angularjs-scope
person Vlad Nicula    schedule 17.06.2013    source источник
comment
Ваш синтаксис при использовании верблюжьего регистра в angular неверен «передача объекта в директиву angularjs из контроллера»> stackoverflow.com/questions/15990122/   -  person Ajay Beniwal    schedule 17.06.2013
comment
поэтому доступ к переменной thisString будет осуществляться как attr this-string ?   -  person Vlad Nicula    schedule 17.06.2013

Ответы (1)


arrow_upward
1
arrow_downward

Есть две проблемы:

Как сказал beniwal, атрибуты в директивах должны быть разделены тире, а переменные локальной области видимости — в camelCase:

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

.

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

Для наблюдения за работой В случае showStuffObj вы должны а) глубоко наблюдать за объектом или напрямую наблюдать за свойством. Глубокое наблюдение стоит дорого, поэтому делайте это только в том случае, если это действительно необходимо:

Просмотр одного объекта:

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

Глубокие часы:

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

Третий параметр часов, установленный в true, включает глубокий просмотр.

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

person Narretz    schedule 17.06.2013
comment
спасибо, я никогда раньше не имел дело со свойствами верблюжьего корпуса в angular! :D - person Vlad Nicula; 17.06.2013