Question

面对我已经创建的指令的问题。该指令似乎正在执行，我知道这是因为调用了console.log（）并且还显示了一些模板，但是没有显示的部分是带有角度表达式的部分。这是一个样本：

我的index.html：

<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">

<head>
    <title>this is the title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body>
    <ul>
        <li>{{section.item1}}</li>
        <li>{{section.item2}}</li>
        <li>{{section.item3}}</li>
    </ul>
    <div ng-repeat='product in section.products_section.list_products'>
        <directive data='product'></directive>
    </div>
</body>
<script src="angularjs/app.js"></script>

</html>

我的app.js：

angular.module('appModule', []).controller('controller', ['$scope', function($scope) {
    $scope.section = {
        item1: 'this is item1',
        item2: 'this is item2',
        item3: 'this is item3',
        products_section: {

            list_products: [

                    {
                        product_name: 'name 1'

                    }, {
                        product_name: 'name 2'
                    }, {
                        product_name: 'name 3'
                    }

                ] //end of list_products
        }
    };
}]).directive('directive', [function() {
    return {
        restrict: 'E',
        scope: {
            date: '='
        },
        templateUrl: 'angularjs/template.html',
        replace: true,
        controller: function($scope) {
            console.log('this is controller in directive is called');
        }

    };
}]);

我的模板html：

<ul>
            <li>{{product.product_name}}</li>
            <li>this-is-to-show-this-is-being-executed</li>
</ul>

firefox控制台：这是指令中的控制器叫做

在浏览器中显示的内容：

this is item1
this is item2
this is item3

this-is-to-show-this-is-being-executed

this-is-to-show-this-is-being-executed

this-is-to-show-this-is-being-executed

SORRY，Stackoverflow说我需要至少10个代表来发布图片。

Answer 1

我发现有些事情是错误的。

    scope: {
        date: '='
    }

应该是：

    scope: {
        data: '='
    },

您对指令中范围变量的引用应该是数据。不是产品。

<ul>
            <li>{{data.product_name}}</li>
            <li>this-is-to-show-this-is-being-executed</li>
</ul>

Answer 2

这很有效。

app.js

draw = function() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].update();
    balls[i].draw();
  }
};

的index.html

angular.module('appModule', [])
  .controller('controller', ['$scope', function($scope) {
    $scope.section = {
      item1: 'this is item1',
      item2: 'this is item2',
      item3: 'this is item3',
      products_section: {

        list_products: [

            {
              product_name: 'name 1'

            }, {
              product_name: 'name 2'
            }, {
              product_name: 'name 3'
            }

          ] //end of list_products
      }
    };
  }])
  .directive('directive', [function(scope) {
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        replace: true,

    };
}]);

Plunkr

面对AngularJS中的指令问题

2 个答案: