javascript - 如果没有填充父范围，AngularJS 绑定(bind)将无法工作

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.

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

如果你想测试我的意思，这里有一个 plunker http://plnkr.co/edit/RtzoNXbkTZkSuiPYlnFp?p=preview

Answer 1

我猜您刚刚忘记了“嵌入”选项。

这可能就是你想要的。

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.