javascript - जब माता पिता निर्देशक संपत्ति में परिवर्तन होता है तो बाल निर्देश जारी नहीं होता है



angularjs angularjs-directive (1)

समाधान 1

मैंने यहां काम करने वाले plnkr की स्थापना की है: https://plnkr.co/edit/fsxMJPAc05imhBqefaRk?p=preview

इस व्यवहार का कारण यह है कि tmpMenuLink ने MyDirectiveCtrl.isDisabled() से MyDirectiveCtrl.isDisabled() गए मूल्य की एक प्रति रखा था। कोई पर्यवेक्षक स्थापित नहीं किया गया है, इसलिए इसे हल करने का एकमात्र तरीका मैन्युअल रूप से किसी भी परिवर्तन के लिए देखने और फिर क्षेत्र को अपडेट करना है।

scope.$watch(function(){
  return MyDirectiveCtrl.isDisabled();
}, function(){
   scope.disabled = MyDirectiveCtrl.isDisabled();
})

समाधान 2

नजर रखने वालों के बिना एक विकल्प एक वस्तु के संदर्भ को एक आदिम प्रकार के बजाय पारित करना है, जैसे कुछ:

$scope.menuStatus = {status: false};

नया PLNKR यहां: https://plnkr.co/edit/RGEK6TUuE7gkPDS6ygZe?p=preview

यह इन 2 सवालों का पालन करता है:

  1. माता-पिता और बच्चे के निर्देशों के बीच दलील दें
  2. बाल निर्देश को पारित करते समय माता-पिता के निर्देश नियंत्रक अपरिभाषित

मेरे पास यह हिस्सा काम कर रहा है; हालांकि, जब मूल निर्देश परिवर्तन के लिए एनजी-अक्षम के लिए मूल्य, बाल डायरेक्टिव मान अपडेट नहीं होते हैं।

कृपया पतली प्लंकर उदाहरण देखें।

HTML:

<div ng-app="myApp">
  <div ng-controller="MyController">
    {{menuStatus}}
    <tmp-menu ng-disabled="menuStatus">
      <tmp-menu-link></tmp-menu-link>
      <tmp-menu-link></tmp-menu-link>
    </tmp-menu>
    <button ng-click="updateStatus()">Update</button>
  </div>
</div>

जावास्क्रिप्ट (AngularJS):

angular.module('myApp', [])
.controller('MyDirectiveController', MyDirectiveController)
.controller('MyController', function($scope){
  $scope.menuStatus = false;
  $scope.updateStatus = function(){
    $scope.menuStatus = $scope.menuStatus?false:true;
  }
})
.directive('tmpMenu', function() {
  return {
    restrict: 'AE',
    replace:true,
    transclude:true,
    scope:{
      disabled: '=?ngDisabled'
    },
    controller: 'MyDirectiveController',
    template: '<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',
    link: function(scope, element, attrs) {


    }
  };
})
.directive('tmpMenuLink', function() {
  return {
    restrict: 'AE',
    replace:true,
    transclude:true,
    scope:{
    },
    require:'^^tmpMenu',
    template: '<div>childDirective disabled: {{ disabled }}</div>',
    link: function(scope, element, attrs, MyDirectiveCtrl) {
      console.log(MyDirectiveCtrl);

      scope.disabled = MyDirectiveCtrl.isDisabled();

    }
  };
})

function MyDirectiveController($scope) {
  this.isDisabled = function() {
    return $scope.disabled;
  };
}

मैं पैरेंट डायरेक्टिव में कैसे बदलाव का पता लगा सकता हूं और इसे बिना सेंसर वॉचर के बिना बाल निर्देश पर पास कर सकता हूं।