Question

查看以下AngularJS代码

dir.js

(function() {
        var myApp = angular.module("MyApp");
          myApp.directive('myMovie', function() {
                return {
                  restrict: 'E',
                  transclude: 'true',
                  template: '<h1>This is my first directives</h1>',
                  link: function(scope, element, attr){
                        element.append("<strong>"+attr.title+"</strong>");
                  }
                };
              });

      })();

当我使用Angular路由时，Above指令不起作用。相同的代码无需在我的应用程序中使用路由。该怎么办？有什么想法当我在我的应用程序中使用“ngRoute”时，为什么这段代码不起作用？

我已将“myMovie”标记添加到HTML正文中。在HTML页面上没有获得指令模板。

以下是“ngRoute”的代码

的script.js

(function(){
    var app = angular.module("MyApp", ["ngRoute"]);

    app.config(function($routeProvider){
        $routeProvider
        .when("/", {
            templateUrl : "main.html",
            controller : "Main",
            controllerAs : "vm"
        })
        .when("/first", {
            templateUrl : "first.html",
            controller : "First",
            controllerAs : "vm"
        })
        .when("/second", {
            templateUrl : "second.html",
            controller : "Second",
            controllerAs : "vm"
        })
        .otherwise(({
            templateUrl : "404.html"
        }));
    });



})();

first.controller.js

(function(){
    var app = angular.module("MyApp");
    app.controller("First", ["$scope", function($scope){
        var vm = this;
        vm.message = "This is first page";
    }]);
})();

second.controller.js

(function(){
    var app = angular.module("MyApp");
    app.controller("Second",["$scope", function($scope){
        var vm = this;
        vm.message = "This is second page";
    }]);
})();

main.controller.js

(function(){
    var app = angular.module("MyApp");
    app.controller("Main", ["$scope", function($scope){
        var vm = this;
        vm.message = "This is main page";
    }]);

})();

我使用指令的HTML页面

first.html

<div>
    <myMovie></myMovie>
</div>

我在上面的代码中错了？

Answer 1

AngularJS规范化元素的标记和属性名称以确定哪些元素匹配哪些指令。我们通常会提到它们区分大小写的camelCase规范化名称的指令（例如 ngModel）。但是，由于HTML不区分大小写，我们参考 DOM中的指令通过小写形式，通常使用 DOM元素上的破折号分隔属性（例如ng-model）。

myMovie指令将与my-movie标记一起使用。

按照惯例，我建议您使用短划线（-）作为限制器，但您可以使用:，_。

<强> Working demo

Source

使用路由时指令不起作用

1 个答案: