數組名不通過傳遞指令

Question

我正在嘗試使用transclude指令。當我嘗試在粘性變量中傳遞array名稱時，它不通過，但name變量的字符串值正在工作。我在控制器中定義了數組和名稱字符串。

注意::從my-box指令中寫出的菜單是採用arry名稱並且正常工作。

請建議，

HTML ::

<my-box 
    bgcolor="#EFF" 
    my-title="buzz2222" 
    my-height="170" 
    my-width="1050" 
    my-color="#1a1a1a" 
    my-bgcolor="#FBFBF9" 
    my-collapseoption=true 
    my-widgetno="1" 
    my-template="latest_template.html" 
    my-url="Business.json" 
    sticky="top_sticky" 
    my-toolbar=false 
    save="saveChanges('custom boxective')"> 
     <menu sticky="items2" name="name" ></menu> 
    </my-box> 

    <menu sticky="items2" name="name" ></menu> 

角指令::

// add a directive 
app.directive("myBox", function($http, $compile) { 
    return { 
     restrict : "E", 
     scope : { 
      items : '=', 
      myTitle : '@', // by value 
      myHeight : '@', // by value 
      myWidth : '@', // by value 
      myColor : '@', // by value 
      myBgcolor : '@', // by value 
      myWidgetno : '@', // by reference 
      myTemplate : '@', 
      /* merge */ 
      sticky: '=sticky', 
      myToolbar : '@', /* merge */ 
      myUrl : '@', 
      myCollapseoption : '@', // by reference 
      save : '&', // event 

     }, 
     transclude:true, 
     templateUrl : function(el, attrs) { 
      return 'generic_widget.html'; 
     }, 
     controller : function($http, $scope, $element, $sce, $templateCache, $compile, $attrs) { 


     }, 
     replace : false, 
     link : function(scope, element, attrs) { 
      element.css("background", attrs.myBgcolor); 
      element.css("color", attrs.myColor); 
      element.css("width", attrs.myWidth + 'px'); 
      element.css("height", attrs.myHeight + 'px'); 
      element.find('#jhelp').html('Now trying get jquery help'); 
     } 
    }; 
}); 
app.directive('menu', function() { 
    return { 
     //require: '^myBox', 
     scope:{ 
      name:'@', 
      sticky:'='}, 
     restrict: 'E',  
     template: '<h3>{{name}}I am coming from Hello {{sticky}} </h3><div ng-repeat="t in sticky">anam repeat </div>', 
     link: function(scope, element, attrs ,mybox) { 
      //console.log('menu scope is '+mybox.sticky); 

     }, 
    }; 
}); 

Answer 1

根據$編譯文件https://docs.angularjs.org/api/ng/service/$compile

範圍：{}將創建一個類似$scope = {} 的隔離範圍在控制器作用域中定義的任何變量都將無法在此指令和後代作用域中訪問。 如果您想在具有隔離範圍的指令內使用變量引用。您可以使用相同的名稱定義雙向綁定（=）的範圍屬性。 在你的情況，你可以在my-box指令

// add a directive 
app.directive("myBox", function($http, $compile) { 
    return { 
     restrict : "E", 
     scope : { 
      items2: '=', // this will be used in menu directive 
      // ... 
      // others not change. 
}); 

進一步定義items2 scope屬性。如果你想訪問控制器的作用域而不用定義每個屬性的變量名稱。您可以使用scope: true而不是scope:{} 在這種情況下。使用$ parse服務來訪問變量引用。