数组名不通过传递指令

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服务来访问变量引用。