angularjs - बाल निर्देश को पारित करते समय माता-पिता के निर्देश नियंत्रक अपरिभाषित




angularjs-directive (2)

आपके कोड में एक टाइपो है:

required:'^^tmpMenu',

इसे बदलने के लिए

require:'^^tmpMenu',

इस plunkr की जाँच करें

https://plnkr.co/edit/DgyW3OFgr1GyAR8fuATi?p=preview

मैंने इस पोस्ट में यहाँ सामान्य सवाल पूछा। काम के उदाहरण के साथ मुझे उत्तर मिल गया है; हालांकि जब मैं मौजूदा कोड को संशोधित करने के लिए इस उदाहरण का उपयोग करने की कोशिश करता हूं, तो मुझे त्रुटि मिलती है। मेरा कोड नीचे और इस प्लंकर पेज में देखें

एचटीएमएल

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<div ng-app="myApp">
  <tmp-menu ng-disabled="true">
    <tmp-menu-link></tmp-menu-link>
    <tmp-menu-link></tmp-menu-link>
  </tmp-menu>
</div>

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

angular.module('myApp', [])
.controller('MyDirectiveController', MyDirectiveController)
.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:{
    },
    required:'^^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;
  };
}

अंदर निर्देशक tmpMenuLink , MyDirectiveCtrl अपरिभाषित है । ऐसा क्यों है?


क्योंकि इसकी require नहीं required

angular.module('myApp', [])
  .controller('MyDirectiveController', MyDirectiveController)
  .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,
      require: '^^tmpMenu',
      template: '<div>childDirective disabled: {{ disabled }}</div>',
      link: function(scope, element, attrs, MyDirectiveController) {

        scope.disabled = MyDirectiveController.isDisabled();

      }
    };
  })

function MyDirectiveController($scope) {
  this.isDisabled = function() {
    return $scope.disabled;
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<div ng-app="myApp">
  <tmp-menu ng-disabled="true">
    <tmp-menu-link></tmp-menu-link>
    <tmp-menu-link></tmp-menu-link>
  </tmp-menu>
</div>





angularjs-directive