以角度向父指令變量傳遞給子指令

Question

我正在嘗試基於包含在div中的元素構建一個簡單的show/hide指令。我有一個父母和一個孩子的指示。當父指令被點擊時，子指令應該切換顯示/隱藏它的div。切換函數位於父控制器中，並在true和false之間切換變量，以便子指令可以顯示/隱藏。

問題：父指令中的切換功能正常工作，但是，子指令不知道單擊父級時切換變量的變化。我通過使用require將ctrl傳遞給child指令中的鏈接函數。這樣我可以訪問父控制器對象來顯示和隱藏。切換變量對孩子來說是可見的，但並不反映初始加載頁面後的任何變化。點擊時，沒有任何顯示或隱藏。

代碼：

angular.module('demo', []) 

.directive('demoParent', function() { 
    return { 
     restrict: 'E', 
     scope: {}, 
     transclude: true, 
     template: '<div ng-click="toggleTarget()" ng-transclude></div>', 
     controller: function($scope) { 
      $scope.toggleTarget = function() { 
       this.openTarget = !this.openTarget; 
      }; 
      this.openTarget = false; 
     } 
    }; 
}) 

.directive('demoChild', function() { 
    return { 
     require: '^demoParent', 
     restrict: 'E', 
     transclude: true, 
     link: function(scope, elem, attrs, ctrl) { 
      scope.ctrl = ctrl; 
     }, 
     template: '<div ng-show="ctrl.openTarget" ng-transclude></div>', 
    }; 
}); 

孩子是否需要一個守望者添加到父CTRL或這是一次經過父母和子女分離變量的情況？

Answer 1

我做了一個Fiddle與您的工作場景，你有一個this功能的問題，除了^demoChild你說的是一個錯字。一旦你的函數裏面，this指着範圍，而不是控制器作爲你的預期，所以這部分應該修改爲：

controller: function($scope) { 
    this.openTarget = false; 
    var _ctrl = this; 
    $scope.toggleTarget = function() { 
     _ctrl.openTarget = !_ctrl.openTarget;    
    };    
} 

Answer 2

試試這個： var me = this; $ scope.toggleTarget = function（）{ me.openTarget =！me.openTarget; };