Angular - 通用指令

2017-04-26 200 views 1 likes

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

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

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

    } 
    }; 
});

来源

2017-04-26 BahaiResearch.com

而这里提供的答案是有道理的，是什么，我会建议使用，我觉得这个问题是有点混乱反正。什么是“我不想强制每个页面使用相同的应用程序变量”，意思是说，你是说你有多个不同的应用程序在运行？因为一般的范例是角度应用程序中的每个“页面”都是一个部分的看法，而控制器是什么改变，而不是应用程序.... – Claies

一个更好的方式来说，它将是，如何创建一个共同的资源，我可以分享任何角开发商 –

回答

您可以创建一个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>

来源

2017-04-26 17:05:23

啊，所以诀窍是从静态角度创建一个新的通用模块 –

Angular - 通用指令

回答

相关问题