指令和控制器的AngularJS依赖项注入_Angularjs

指令和控制器的AngularJS依赖项注入

angularjs

指令和控制器的AngularJS依赖项注入,angularjs,Angularjs,假设我有： <body ng-app> <block-type-1>...</block-type-1> <block-type-2>...</block-type-1> <block-type-3>...</block-type-1> 其中一些块是在服务器端呈现的，一些是从templateUrl呈现的。每个块都有自己的函数集，但也有一些所有块共享的函数。例如，如果单击每个块的标题，它将

假设我有：

<body ng-app>
    <block-type-1>...</block-type-1>
    <block-type-2>...</block-type-1>
    <block-type-3>...</block-type-1>

其中一些块是在服务器端呈现的，一些是从templateUrl呈现的。每个块都有自己的函数集，但也有一些所有块共享的函数。例如，如果单击每个块的标题，它将切换整个块。所以所有这些都应该有这个功能

我不知道如何为从templateUrl呈现的块共享这些公共函数！其他模块都可以，因为我可以在标签上设置一个控制器，它们可以正常工作

谢谢

如果为应用程序创建服务以跨控制器和指令共享公共功能，则可以这样做

下面的示例显示了如何通过factory方法创建服务，从而在整个应用程序中共享功能。您可以选择在指令和控制器中注入服务，如指令block-type-1和block-type-2以及控制器MyController中所示。控制器使用$scope.toggle调用公共服务的toggle函数，从而影响依赖于服务中的值更改的表达式

指令模板：并调用公共服务函数Common.getToggle，其中返回的值受通过Common.toggle进行切换的变量的更改的影响。这就是在单击切换时更改两个指令表达式的原因，因为它调用Common.toggle

示例：检查相关的演示

HTML

  <body ng-app="app" ng-controller="MyController">
    <button ng-click="toggle()">Toggle</button>
    <block-type-1></block-type-1>
    <block-type-2></block-type-2>
    <block-type-3></block-type-3>
  </body>

angular.module('app', []).

factory('Common', function() {
    var toggled = false;
    return {
        toggle: function() { 
            toggled = !toggled; 
        },
        getToggle: function() {
            return toggled? 'toggled': 'untoggled';
        }
    };
}).

controller('MyController', function($scope, Common) {
    $scope.toggle = function() {
        Common.toggle();
    };
}).

directive('blockType1', function(Common) {
    return {
        restrict: 'E',
        scope: {},
        controller: function($scope) {
            $scope.Common = Common;
        },
        template: '<div>{{Common.getToggle()}} from block-type-1</div>'
    };
}).

directive('blockType2', function(Common) {
    return {
        restrict: 'E',
        scope: {},
        controller: function($scope) {
            $scope.Common = Common;
        },
        template: '<div>{{Common.getToggle()}} - From block-type-2</div>'
    };
}).

directive('blockType3', function() {
    return {
        restrict: 'E',
        scope: {},
        controller: function($scope) {},
        template: '<div>block-type-3: Im unaffected by the toggle</div>'
    };
});