将子Angular app注入父app指令

时间:2015-07-15 19:35:45

标签: javascript angularjs

我有一个名为ng-app =“appA”的父Angular应用程序,以及其中的指令。我有一个名为ng-app =“appB”的自包含Angular应用程序。如何将appB注入appA中的指令?

2 个答案:

答案 0 :(得分:2)

你需要让appB成为appA的依赖关系:

angular
    .module('appA', ['appB'])
     //NEED TO INJECT CHILD ANGULAR APP MODULE HERE
    .directive('myDirective',['$rootScope', 'example' function ($rootScope, example) {
        return {
            restrict: 'E',
            scope: {},
            transclude: true,
            templateUrl: '/html/directives/myDirective.html',
            link: function(scope, elem, attr){
                ...
            }

然后你只需要在你的应用程序中加载appB的代码,你就可以了

修改

我不是100%关于你的项目结构,而是看看这个示例应用程序是如何构建的

angular.module('myApp', [
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])

父应用为myApp,并使用index.html文件中的ng-app="myApp"进行自举。每个依赖项都是这样创建的:

angular.module('myApp.directives', []).
directive('testDirective', [function() {
  return {
    restrict: 'E',
    scope: {
      field: '@',
    },
    transclude: true,
    template: "<div ng-transclude></div>",
    link: function(scope, elem, attr, ctrl) {
        console.log(scope);
    }

  }


}]);

只要在应用程序引导之前加载了myApp.directives js,我就可以像这样使用我的指令

<test-directive>testing</test-directive>

这是一个插件

http://plnkr.co/edit/zzvUR9WBBlqM8QqK6M8K?p=preview

答案 1 :(得分:0)

当您声明父模块时,您需要像这样做

angular.module("appA",["appB"]);

你还需要在html页面中添加对包含appB模块的文件的引用,如下所示

<script src="appB.js"></script>
<script src="appA.js"></script>

确保在appA之前加载了appB