Question

当尝试使用双向绑定创建动态指令到ng-repeat时，它们不呈现，案例如下：

 <div ng-controller='initCtrl'>
    <navigation>
       <div ng-repeat="item in items">
            <item value="{{item.item}}" app="{{item.app}}"></item>
       </div>
    </navigation>
 </div>



app.controller('initCtrl', function($scope) {
   $scope.items = [
     {name: 'andres', app: 'appcontroller'},
     {name: 'julio', app:'appcontroller'},
     {name: 'master', app: 'appcontroller'}
   ];

  $scope.appcontroller = {
     method: 'some string'
  };

});



//my directives

app.directive('navigation', function(){
  return {
  strict: 'E',
  transclude: true,
  template: '<div class="panel"><div ng-transclude></div></div>'
  };
});

app.directive('item', function() {
  return {
    strict: 'E',
    require: '^navigation',
    scope: {
      value: '@',
      app: '='
    },
    template: '<div class="item">{{ value }} and {{ app.method }}</div>'
  };
 });

app属性应该是双向biding，它在父控制器中查找obj，但是，我认为生成到app中的字符串导致错误。

你们有什么想法？

Answer 1

当您使用应用时：＆＃39; =＆＃39;在指令定义中，当您传递属性值时，{{}}中不需要。无论如何都会执行传递的值。工作代码：

＆＃13;

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    </head>
    <body ng-app="app">
        <div ng-controller='initCtrl'>
            <navigation>
                <div ng-repeat="item in items">
                    <item value="{{item.name}}" app="item.app"></item>
                </div>
            </navigation>
        </div>

        <script>
            var app = angular.module('app', []);
            app.controller('initCtrl', function($scope) {
                $scope.items = [
                    {name: 'andres', app: 'appcontroller'},
                    {name: 'julio', app: 'appcontroller'},
                    {name: 'master', app: 'appcontroller'}
                ];

                $scope.appcontroller = {
                    method: 'some string'
                };

            });

            //my directives
            app.directive('navigation', function() {
                return {
                    strict: 'E',
                    transclude: true,
                    template: '<div class="panel"><div ng-transclude></div></div>'
                };
            });

            app.directive('item', function() {
                return {
                    strict: 'E',
                    require: '^navigation',
                    scope: {
                        value: '@',
                        app: '='
                    },
                    template: '<div class="item">{{ value }} and {{ app }}</div>'
                };
            });
        </script>
    </body>
</html>

＆＃13;

2种方法将错误绑定到ng-repeat中

1 个答案: