Question

我认为我的想法很简单，指令从未运行。

http://plnkr.co/edit/eKDIWiA1WfK7r5yxMFnN?p=preview

<body ng-app="myapp">
  <h1>top of app</h1>
  <div my-directive></div>

  <script>
    var myApp = angular.module('myapp', []);
    myApp.directive('myDirective ', function($compile) {
      return {
        restrict: 'EA',
        template: "<input type='text' ng-model='topData' /> {{ topData }}"
      }
    });
  </script>
 </body>

Answer 1

这里有两个问题在评论中指出。首先，您使用指令名称输入了拼写错误。删除末尾的额外空间。其次，更重要的是，你的指令没有范围。因此，{{topData}}或任何其他绑定将不起作用，因为它没有存在的范围。您需要提供指令它自己的隔离范围或包含控制器。我给你举了一个控制器的例子。 JsBin Example

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myapp" ng-controller="myController">
  <h1>top of app</h1>
  <div my-directive></div>

  <script>
    var myApp = angular.module('myapp', []);

    myApp.controller('myController', function ($scope) {
      $scope.topData = 'Hello';
    });

    myApp.directive('myDirective', function() {
      return {
        restrict: 'EA',
        template: '<input type="text" ng-model="topData" /> {{ topData }}'
      }
    });
  </script>
</body>
</html>

无法弄清楚为什么angularjs中的简单独立指令不会运行

1 个答案: