在 DOM 上执行多个指令

Question

在 AngularJs1.3 的一个模块中定义了 2 个指令

我发现只有 1 个指令被执行，虽然当另一个指令被注释掉时这 2 个指令单独工作。
执行控制台没有异常。

指令

angular.module('studentDetailApp.directives',[]).directive('studentDirective', function () {
    return {
    template:'...',
    link: function ($scope, element, attrs) { console.log('student directive');}
    }
})
.directive('basicDirective', function () {
    return {
    restrict:'E',
    template:'custom directive: {{textToInsert}}',
    link:function ($scope, element, attrs) { console.log('Printing out custom template');}
    }
});

index.html

<html lang="en" ng-app="studentDetailApp">
<head>
    ....
</head>
<body>
    <div ng-controller="StudentController"> 
      <basic-directive/>
      <div student-directive></div>
    </div>
</body>
</html>

我发现第二个指令有效 - 而第一个指令被忽略了。
错误是什么？

Answer 1

您需要像 <basic-directive></basic-directive> 一样正确地关闭 basic-directive 元素，元素标签本质上不会自动关闭 img、br、hr，等等 List of self closing tags

标记

<div ng-controller="StudentController"> 
     <basic-directive></basic-directive>
  <div student-directive></div>
</div>

在 DOM 上执行多个指令

Executing multiple directives on a DOM

html

javascript

tags

angularjs

angularjs-directive