javascript - 将子 Angular 应用程序注入(inject)父应用程序指令

Question

我有一个名为 ng-app="appA"的父级 Angular 应用程序，以及其中的一个指令。我有一个名为 ng-app="appB"的独立 Angular 应用程序。如何将 appB 注入(inject) appA 中的指令？

Answer 1

您需要像这样使 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