Question

我写了这个指令

var app = angular.module('ExampleApp2', ['ngResource', 'ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when('/page1', {templateUrl: 'page1.html', controller: 'page1Controller'})
        .when('/page2', {templateUrl: 'page2.html', controller: 'page2Controller'})
        .otherwise({redirectTo: '/page1'})
});

app.directive('mymenu', function() {
    return {
        restrict: 'E',
        scope: {
            menuItems: "="
        },
        templateUrl: 'menu.html'
    };
});
app.controller('page1Controller', function($scope, $location) {
    $scope.menuItems = [{title: "Menu Item1", address: "/page3.html"}, {title: "Menu Item2", address: "/page4.html"}]
});

app.controller('page2Controller', function($scope, $location) {
    $scope.menuItems = [{title: "Menu Item3", address: "/page5.html"}, {title: "Menu Item4", address: "/page6.html"}]
});

指令的模板是

<table>
    <thead>
        <th>My Menu</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in menuItems">
            <td><a href="{{item.address}}">{{item.title}}</a></td>          
        </tr>
    </tbody>
</table>

我试图像这样使用它

<div>
<mymenu menuItems="{{menuItems}}"></mymenu>
</div>

但它只打印表头但没有项目。我也尝试过使用menItems：＆＃39; @＆＃39;但它仍然没有显示任何内容。

我的希望是{{menuItems}}会传递数组，然后是menItems：＆＃39; =＆＃39;将它分配给指令的内部范围......

在我的主页面中，我删除了{{menuItems}}并调用了我的指令，但仍然是同样的问题。

Answer 1

简化回答：

你必须将html属性从menuItems更改为menu-items，因为它会自动转换为斜线大小写，你必须删除大括号，因为=符号需要引用一个对象而不是它的价值。您的代码应如下所示：

<mymenu menu-items="menuItems"></mymenu>

更详细：

需要注意的一点是，当你在指令范围声明中使用=符号时，它意味着你将获得该对象的引用，因此如果你有可能改变它的值，那么更改将被传播到视图控制器。

第二点需要注意的是，来自指令范围的camelCased指令名称或属性会自动转换为斜线。这是由AngularJS团队决定的，因为HTML代码对识别变化不敏感。

实时样本：http://plnkr.co/edit/R3TIxLGmzCsXmJh8qtFc?p=preview

查看

<div ng-view></div>
<script type="text/ng-template" id="page1.html"><mymenu menu-items="menuItems"></mymenu></script>
<script type="text/ng-template" id="page2.html">Page 2!</script>
<script type="text/ng-template" id="page3.html">page 3!</script>
<script type="text/ng-template" id="page4.html">Page 4!</script>
<script type="text/ng-template" id="menu.html">
  <table>
    <thead>
        <th>My Menu</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in menuItems">
            <td><a href="{{item.address}}">{{item.title}}</a></td>          
        </tr>
    </tbody>
  </table>
</script>

JS

var app = angular.module('ExampleApp2', ['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when('/', {templateUrl: 'page1.html', controller: 'page1Controller'})
        .when('/page2', {templateUrl: 'page2.html', controller: 'page2Controller'})
        .when('/page3', {templateUrl: 'page3.html'})
        .when('/page4', {templateUrl: 'page4.html'})
        .otherwise({redirectTo: '/'})
});

app.directive('mymenu', function() {
    return {
        restrict: 'E',
        scope: {
            menuItems: "="
        },
        templateUrl: 'menu.html'
    };
});

app.controller('page1Controller', function($scope, $location) {
    $scope.menuItems = [{title: "Menu Item1", address: "/page3.html"}, {title: "Menu Item2", address: "/page4.html"}]
});

app.controller('page2Controller', function($scope, $location) {
    $scope.menuItems = [{title: "Menu Item3", address: "/page5.html"}, {title: "Menu Item4", address: "/page6.html"}]
});

干杯！

无法将对象数组传递给指令

1 个答案: