Question

我今天开始学习AngularJS指令......我无法获得指导工作。请帮忙

<html ng-app="ngBasic">

  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script>
      var app = angular.module('ngBasic', []);
      app.controller('ngBasicCtrl', function($scope) {
        $scope.age = 20;
      });

      app.directive('myDirective', function($scope) {
        return {
          template: '<h1>{{age}}</h1>'
        }
      });

    </script>
  </head>

  <body ng-controller="ngBasicCtrl">
    <h1>{{age}}</h1>

    <my-directive></my-directive>
    <div my-directive></div>
    <div class='my-directive'></div>
  </body>


</html>

https://jsfiddle.net/bigzidane/t8Lv3mpg/2/

目前，页面仅显示20.期待标记但尚未显示。

Answer 1

使用scope选项创建模板可以引用的隔离范围：

app.directive('myDirective', function() {
  return {
    scope: {
      age: '='
    },
    template: '<h1>{{age}}</h1>'
  }
});

现在您可以将控制器$scope＆＃39; s age传递给指令范围，例如：

<my-directive age="age+1"></my-directive>

将呈现21。更新小提琴 - ＆gt;的 https://jsfiddle.net/t8Lv3mpg/3/

Answer 2

您必须从返回指令的函数中删除$scope，因为它不会使用$scope参数。

 app.directive('myDirective', function() {
    return {
      template: '<h1>{{age}}</h1>'
    }
  });

不显示AngularJS指令模板

2 个答案: