angular 指令限制 M 不起作用

Question

有一个指令 restrict M 如下代码。但是页面上没有任何输出。怎么了？谢谢！

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script type="text/javascript" src="lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('indexCtrl',function($scope){

        });
        app.directive('di',function(){
            return{
                restrict:"M",
                template:'abc'
            };
        })
    </script>
</head>
<body ng-controller="indexCtrl">
<!-- directive:di -->
</body>

</html>

Answer 1

两件事：

模板需要包含在 HTML 标签中
在指令中添加 replace: true 属性，用 HTML 模板

di

var app = angular.module('app', []);
app.controller('indexCtrl', function($scope) {

});

app.directive('di', function() {
  return {
    restrict: 'M',
    template: '<p>abc</p>',
    replace: true
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">

<body ng-controller="indexCtrl">
  <!-- directive:di -->
</body>

</html>

Answer 2

我对您的代码进行了一些小的改动，并且成功了。我在指令中添加了 replace : true，并将模板参数修改为 html content。

代码：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('indexCtrl',function($scope){

       });
        app.directive('di',function(){
            return{
                restrict:"M",
                replace : true,
                template:'<b>abc</b>'
            };
        })
    </script>
</head>
<body ng-controller="indexCtrl">
<!-- directive:di -->
</body>

</html>

angular 指令限制 M 不起作用

angular directive restrict M not work

angularjs

angularjs-directive