Question

这是我的html页面：

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>

      <script type="text/javascript" src="angular.min.js"></script>
      <script src="scoping_directives.js"></script>

    </head>
    <body ng-app="scoping">
        <div ng-controller="OuterController">
            <p>{{outer_var}}</p>
            <my-directive></my-directive>
        </div>
    </body>
    </html>

这是JS文件：

angular.module('scoping', [])
    .controller('OuterController', function($scope){
      $scope.outer_var = 10;

    })
    .directive('myDirective', function() {
      console.log("inside directive1");
      return {
        /*scope :{
            inner_var : 20
        },*/
        template:'<p>tanmay</p>'
      };
    });

有人可以解释为什么指令中的模板没有呈现。我只输出10作为输出。输出产生没有错误。

Answer 1

指令中通常需要 restrict 选项，该选项应设置为：

＆＃39; A＆＃39; - 仅匹配属性名称
＆＃39; E＆＃39; - 仅匹配元素名称
＆＃39; C＆＃39; - 仅匹配班级名称

这些限制可以根据需要合并：

＆＃39; AEC＆＃39; - 匹配属性或元素或类名

详细说明如下所示

<强> Working Demo

angular.module('scoping', [])
    .controller('OuterController', function ($scope) {
    $scope.outer_var = 10;

})
    .directive('myDirective', function () {
    console.log("inside directive1");

    return {
        restrict: 'E',
        template: '<p>tanmay</p>',
        replace: true
        /*scope :{
            inner_var : 20
        },*/
    };
});

使用指令定义对象的restrict属性，我们可以决定指令在DOM中的位置。我们有四种选择：

<强> 1。元件

restrict: 'E'

该指令只能作为HTML元素出现。

示例：

<my-directive></my-directive>

<强> 2。属性

restrict: 'A'

该指令只能作为元素中的HTML属性出现。如果未指定restrict，则这是默认值。

示例：

<div my-directive="expression"></div>

第3。类

restrict: 'C'

该指令只能出现在HTML元素的class属性中。

示例：

<div class="my-directive: expression;"></div>

<强> 4。评论

restrict: 'M'

该指令只能出现在HTML注释中。

示例：



由 angularjshub - restrict
提供

为什么这个指令不起作用..有人可以解释一下吗？

1 个答案: