Question

说我有：

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

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

我无法弄清楚如何为从templateUrl呈现的块共享这些常用函数！其他块都可以，因为我可以在<body>标签上设置一个控制器，它们可以正常工作。

谢谢！

Answer 1

如果为应用程序创建服务以跨控制器和指令共享通用功能，则可以执行此操作。

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

指令模板：<block-type-1>和<block-type-2>调用Common服务函数Common.getToggle()，其中返回的值受toggled变量的更改影响Common.toggle()。这是在单击切换时更改两个指令的表达式的原因，因为它调用了Common.toggle()。

示例：检查关联的plunker演示。

<强> 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>

<强> JS

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>'
    };
});

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

1 个答案: