Angularjs 如何使用服务公开指令方法

如何在模块之间不使用$broadcast或'='来公开指令方法

使用（事件）如果有多个指令，将通知所有指令。它也不能返回值

我认为Angular的功能并不是最好的

使用服务（我猜）：它有一个名为“$uibModal”的服务。 通过注入$uibModal服务，可以调用Modal指令的函数“$uibModal.open（）”

这样对吗

.factory('myService', [function() {
    return {
        charCount: function(inputString) {
            return inputString.length;
        }
    }
}])

此服务公开函数charCount（）； 在你的指令中，你必须像这样注入它

.directive('testDirective', ['myService', function(myService) {
    return {
        restrict: 'A',
        replace: true,
        template: "<div>'{{myTestString}}' has length {{strLen}}</div>",
        link: function($scope, el, attrs) {
            $scope.myTestString = 'string of length 19';
            $scope.strLen       = myService.charCount( $scope.myTestString );
        }
    }
}])

#出去{
宽度：96%；
身高：25%；
填充：10px；
边框：3个蓝色虚线；
字体系列：monospace；
字体大小：15px；
}
var-APP=angular.module（'MYAPP'，[]）；
APP.controller（'main'，['$scope'，'$element'，'$compile'，'myService'，function（$scope，$element，$compile，myService）{
$scope.test='我的测试控制器'；
$scope.directiveTest=“指令测试”；
var testSvc=myService.charCount（$scope.test）；
$scope.showTestDir=true；
}])
.directive（'testDirective'，['myService'，function（myService）{
返回{
限制：“A”，
替换：正确，
模板：“{myTestString}}”的长度为{{strLen}}”，
链接：功能（$scope、el、attrs）{
$scope.myTestString='stringoflength 19'；
$scope.strLen=myService.charCount（$scope.myTestString）；
}
}
}])
.factory（'myService'，[function（））{
返回{
charCount:函数（inputString）{
返回inputString.length；
}
}
}])
.filter（'toUpper'，function（）{
返回函数（输入）{
返回input.toUpperCase（）；
}
})
.filter（'toLower'，function（）{
返回函数（输入）{
返回input.toLowerCase（）；
}
})
;
{{test}}-未筛选


{{test | toUpper}}-过滤的toUpper


{{test | toLower}}-过滤toLower

向服务注册其API的指令示例： 请注意，该指令使用指令的

name

属性确定的名称注册api。为了避免内存泄漏，当作用域被销毁时，它会注销自身

---

更新 如何从控制器使用它

定名

angular.module（'myApp'，[]）
.service（“apiService”，function（））{
var apiHash={}；
this.addApi=函数（名称，api）{
apiHash[name]=api；
};
this.getApi=函数（名称）{
返回apiHash[name]；
};
})
.指令（“myDirective”，功能（apiService）{
返回{
限制：'E'，
作用域：{}，
模板：`{title}}`，
链接：postLink
};
功能后链接（范围、元素、属性）{
var name=attrs.name | |“myDirective”；
var-api={}；
api.setTitle=函数（值）{
scope.title=值；
};
apiService.addApi（名称，api）；
作用域：$on（“$destroy”，函数（）{
apiService.addApi（名称，空）；
});
}
})
.controller（'home'，函数（$scope，apiService）{
$scope.title=“新标题”；
$scope.setTitle=函数（）{
apiService.getApi（'maintTitle'）.setTitle（$scope.title）；
};
})

定名

我把你的建议发表在一本书上。对我不起作用。也许我忘了什么。我添加了一个片段（如下）它在那里工作，plunker看起来很好实际上，我不知道为什么它在那里不工作，让我再看看谢谢你的回复。如何从控制器使用它？我在普朗克试过一些东西。但没有起作用。我需要的是expose指令的方法供其他组件使用。就像我们正在构建一个包。谢谢你的回复！我在这里看到的一个缺点是，正如我在问题中所说，“如果有多个指令，所有指令都将被通知”。服务“service”返回一个已经由angular bootstrap进程初始化的单例。仔细想想，听起来我需要返回一个工厂来操作每个指令……使用指令上的

name

属性来分隔API。在上面的示例中，服务以名称

mainttitle

存储api。你可以在指令的其他实例中使用其他名称。我知道它不是说谢谢的地方，但无论如何都要表示感谢！谢谢你的回复。但是，如果想从控制器“main”调用charCount（），您可以在控制器中注入服务，我已经更新了代码段，谢谢您的回复。但请注意，控制器上的“myService.charCount（$scope.test）；”无效。真正将值设置为“test”的是控制器“$scope.test”的第一行。范围绑定是真正改变值的东西。看看普朗克，是的，你是对的$var testSvc=myService.charCount（$scope.test）行不会更改scope.test；我把它放进去是为了证明可以从控制器调用mySerice。如果您使用console.log（testSvc）；您将看到$scope.test的字符数，但仅在控制台日志中看到。不用担心。上面的例子涵盖了很多概念。我的建议是慢慢来，感受一下。之后，你会发现，你可以做很多事情，只是一些规则。只要记住，我们都以不同的速度学习，每个人都有不同的节奏。所以，慢慢来，玩得开心

$scope.strLen       = myService.charCount( $scope.myTestString );

app.service("apiService", function() {
    var apiHash = {};
    this.addApi = function (name,api) {
        apiHash[name] = api;
    };
    this.removeApi = function (name) {
        delete apiHash[name];
    };
    this.getApi = function (name) {
        return apiHash[name];
    };
});

app.directive("myDirective", function (apiService) {
    return {
        restrict: 'E',
        scope: {},
        template: `<h1>{{title}}</h1>`,
        link: postLink
    };
    function postLink(scope, elem, attrs)
        var name = attrs.name || 'myDirective';
        var api = {};
        api.setTitle = function(value) {
            scope.title = value;
        };
        apiService.addApi(name, api);
        scope.$on("$destroy", function() {
            apiService.removeApi(name);
        });
    }
});

apiService.getApi('myDirective').setTitle("New Title");

  app.controller('home', function($scope,apiService) {
    $scope.title = "New Title";
    $scope.setTitle = function() {
      apiService.getApi('mainTitle').setTitle($scope.title);
    };
  })

  <body ng-controller="home">

    <my-directive name="mainTitle"></my-directive>
    <p>
      <input ng-model="title" />
      <button ng-click="setTitle()">Set Title
      </button>
    </p>
  </body>