Question

我正在尝试创建自定义指令..

 <head>
    <script type="text/javascript" src="../Scripts/angular.min.js"></script>
    <script type="text/javascript" src="../Scripts/DataDirectives.js"></script>
    </head>
    <body  style="overflow: hidden" >
      <div ng-app="myApp">
        <SampleData></SampleData>
      </div>
    </body>

在名为DataDirectives.js的单独Javascript文件中，存在以下代码..

var app = angular.module('myApp', []);

app.directive('SampleData', function () {
    return {
        restrict: 'E',
        template: '<div>Sample Div,To test angular Directives</div>'
    };
});

因此，当我运行页面时，我看不到div元素的那个页面上的任何文本。我的上述代码可能出错。感谢Advance中的帮助...... :)

Answer 1

你有2 ng-app以及你没有遵循所需的命名对话

＆＃13;

var app = angular.module('myApp', []);

app.directive('sampleData', function() {
  return {
    restrict: 'E',
    template: '<div>Sample Div,To test angular Directives</div>'
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <sample-data></sample-data>
</div>

＆＃13;

Answer 2

在html写指令名称中：sample-data

在js sampleData

中

var app = angular.module('myApp', []);

app.directive('sampleData', function () {
    return {
        restrict: 'E',
        template: '<div>Sample Div,To test angular Directives</div>'
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"  style="overflow: hidden" >
      <div ng-app="myApp">
        <sample-data></SampleData>
      </div>
    </body>

Answer 3

您正在使用camelcase命名约定在模板中定义angular指令。 angular指令应该在sample-data之类的模板中声明。然后在javascript文件中，您可以像sampleData一样引用它。

考虑到这些因素，您应该按以下方式更改代码：

<div ng-app="myApp">
   <sample-data></sample-data>
</div>

另一种方法是在现有元素中声明该指令。例如：

<div sample-data="exp"></dir>

在javascript中：

var app = angular.module('myApp', []);

app.directive('sampleData', function () {
    return {
        restrict: 'E',
        template: '<div>Sample Div,To test angular Directives</div>'
    };
});

请参阅较低版本的sampleData。

创建自定义指令不起作用

3 个答案: