Question

我正在尝试用angularJS编写一个小应用程序菜单。像所有Windows应用程序一样。

我尝试使用angularJS 1.3.10构建此菜单。我面临的问题不是问题，而是更像是关于内部问题的问题。

我有两个指令：

var chMenuModule = angular.module('chMenu',['chMenuItemModule']);
chMenuModule.controller('chMenuController', function ($scope) {
});

chMenuModule.directive('chMenu',['$document', function($document){
   return{
       restrict: 'E',
       template : '<div></div>',
       link : link,
       scope : {}
    };

    function link(scope,element,attrs)
    {

    }
}]);


var chMenuItemModule = angular.module('chMenuItemModule',[]);
chMenuItemModule.controller('chMenuItemController', function ($scope) {
});

chMenuItemModule.directive('chMenuItem',['$document', function($document){
   return{
       scope:{
           name : '@itemName'
       },
       restrict: 'E',
       template : '<button>{{name}}</button>',
       link : link,
    };

    function link(scope,element,attrs)
    {
    }
}]);

正如您所看到的，我将第一个范围留空了导致问题，即当我使用这两个指令时：

    <ch-menu>
        <ch-menu-item item-name="File">
        </ch-menu-item>
        <ch-menu-item item-name="Edit">

        </ch-menu-item>
        <ch-menu-item item-name="View">

        </ch-menu-item>
        <ch-menu-item item-name="Help">

        </ch-menu-item>
    </ch-menu>

我的按钮中没有任何文字。如果我用这样的一些blabla填充我的第一个范围（父母）

scope:{bla:'blabla'}

按钮显示正确。

使用chrome检查这一点告诉我，对于空的范围，按钮的类是 ng-binding 但是当我用blabla填充它时，它是 ng-isolated-scope < /强>

为什么我必须使用我不需要的值填充父作用域，或者有更聪明的方法来执行此操作？

如果您想测试我的意思http://plnkr.co/edit/RtzoNXbkTZkSuiPYlnFp?p=preview
，请使用以下内容

Answer 1

我猜你刚忘记'transclude'选项。

这可能是你想要的。

chMenuModule.directive('chMenu',['$document', function($document){
   return{
       restrict: 'E',
       template : '<div><div ng-transclude></div></div>',
       transclude:true,
       link : link,
       scope : {}
    };

    function link(scope,element,attrs)
    {

    }
}]);

plunker is here.

没有填充的父作用域，AngularJS绑定不起作用

1 个答案: