Question

我创建了一个通用directive，我想在我们网站的任何Angular页面中使用它。我不想强制每个页面使用相同的app变量。我如何将此指令更改为通用，以便它可以作为依赖项添加（当然包含在单独的js文件中）？

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

app.directive('helloWorld', function() {
 return {
  restrict: 'AE',
  replace: 'true',
  scope: {
  name: '@',
 },
 template: '<h3 >Hello {{name}}</h3> ',

   }
  };
});

Answer 1

您可以创建一个common模块，在其上声明您的指令，并将其用作每个应用程序的模块依赖项。通过在您的应用模块依赖项上添加模块，您将能够使用您的指令以及您在common模块中声明的每个提供商。

/common.module.js

;(function() {

    var commom = angular.module('common', []);

    commom.directive('helloWorld', function() {
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                name: '@',
            },
            template: '<h3 >Hello {{name}}</h3> ',
        };
    });

})();

/index.html

<html>
...
<body ng-app="myapp">

    <hello-world name="World"></hello-world>

    <script src="angular.min.js"></script>
    <script src="common.js"></script>
    <script>    
        var app = angular.module('myapp', ['common']);
    </script>
</body>
</html>

角度 - 通用指令

1 个答案: