我有一个指令，这是代码:
.directive('map', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function($scope, element, attrs) {
var center = new google.maps.LatLng(50.1, 14.4);
$scope.map_options = {
zoom: 14,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
var dirService= new google.maps.DirectionsService();
var dirRenderer= new google.maps.DirectionsRenderer()
var showDirections = function(dirResult, dirStatus) {
if (dirStatus != google.maps.DirectionsStatus.OK) {
alert('Directions failed: ' + dirStatus);
return;
}
// Show directions
dirRenderer.setMap(map);
//$scope.dirRenderer.setPanel(Demo.dirContainer);
dirRenderer.setDirections(dirResult);
};
// Watch
var updateMap = function(){
dirService.route($scope.dirRequest, showDirections);
};
$scope.$watch('dirRequest.origin', updateMap);
google.maps.event.addListener(map, 'zoom_changed', function() {
$scope.map_options.zoom = map.getZoom();
});
dirService.route($scope.dirRequest, showDirections);
}
}
})
我想在用户操作上调用updateMap()。操作按钮不在指令上。
从控制器调用updateMap()的最佳方法是什么?
你可以把方法名告诉指令来定义你想从控制器调用哪个，但没有隔离作用域，
angular.module("app", [])
.directive("palyer", [
function() {
return {
restrict: "A",
template:'<div class="player"><span ng-bind="text"></span></div>',
link: function($scope, element, attr) {
if (attr.toPlay) {
$scope[attr.toPlay] = function(name) {
$scope.text = name + " playing...";
}
}
}
};
}
])
.controller("playerController", ["$scope",
function($scope) {
$scope.clickPlay = function() {
$scope.play('AR Song');
};
}
]);
.player{
border:1px solid;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="playerController">
<p>Click play button to play
<p>
<p palyer="" to-play="play"></p>
<button ng-click="clickPlay()">Play</button>
</div>
</div>
基于Oliver的回答-你可能并不总是需要访问指令的内部方法，在这种情况下，你可能不想创建一个空白对象，并添加一个控件attr到指令，只是为了防止它抛出错误(不能设置属性“takeTablet”为undefined)。
你也可能想在指令的其他地方使用这个方法。
我会加上一个检查，以确保范围。控件存在，并以与显示模块模式类似的方式为其设置方法
app.directive('focusin', function factory() {
return {
restrict: 'E',
replace: true,
template: '<div>A:{{control}}</div>',
scope: {
control: '='
},
link : function (scope, element, attrs) {
var takenTablets = 0;
var takeTablet = function() {
takenTablets += 1;
}
if (scope.control) {
scope.control = {
takeTablet: takeTablet
};
}
}
};
});
你可以把方法名告诉指令来定义你想从控制器调用哪个，但没有隔离作用域，
angular.module("app", [])
.directive("palyer", [
function() {
return {
restrict: "A",
template:'<div class="player"><span ng-bind="text"></span></div>',
link: function($scope, element, attr) {
if (attr.toPlay) {
$scope[attr.toPlay] = function(name) {
$scope.text = name + " playing...";
}
}
}
};
}
])
.controller("playerController", ["$scope",
function($scope) {
$scope.clickPlay = function() {
$scope.play('AR Song');
};
}
]);
.player{
border:1px solid;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="playerController">
<p>Click play button to play
<p>
<p palyer="" to-play="play"></p>
<button ng-click="clickPlay()">Play</button>
</div>
</div>
您可以指定一个DOM属性，该属性可用于允许指令在父作用域上定义函数。然后父作用域可以像调用其他方法一样调用此方法。这是一个活塞。下面是相关代码。
Clearfn是指令元素上的一个属性，父作用域可以将一个作用域属性传递给它，然后指令可以将该作用域属性设置为一个完成所需行为的函数。
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<style>
my-box{
display:block;
border:solid 1px #aaa;
min-width:50px;
min-height:50px;
padding:.5em;
margin:1em;
outline:0px;
box-shadow:inset 0px 0px .4em #aaa;
}
</style>
</head>
<body ng-controller="mycontroller">
<h1>Call method on directive</h1>
<button ng-click="clear()">Clear</button>
<my-box clearfn="clear" contentEditable=true></my-box>
<script>
var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope){
});
app.directive('myBox', function(){
return {
restrict: 'E',
scope: {
clearFn: '=clearfn'
},
template: '',
link: function(scope, element, attrs){
element.html('Hello World!');
scope.clearFn = function(){
element.html('');
};
}
}
});
</script>
</body>
</html>
尽管将对象暴露在指令的孤立作用域上以方便与之通信可能很有吸引力，但这样做可能会导致令人困惑的“意大利面条”代码，特别是当你需要通过几个级别(控制器、指令、嵌套指令等)链接这种通信时。
我们最初是沿着这条路走的，但经过更多的研究后发现，它更有意义，并导致更可维护和可读的代码，以公开事件和属性，指令将通过服务进行通信，然后在指令中的服务属性上使用$watch或任何其他控件，这些控件需要对通信的这些变化做出反应。
这种抽象与AngularJS的依赖注入框架配合得非常好，因为你可以将服务注入到任何需要对这些事件做出反应的项中。如果你看一下Angular.js文件，你会发现里面的指令也以这种方式使用services和$watch，它们不会在孤立的作用域中公开事件。
最后，如果你需要在相互依赖的指令之间通信，我建议在这些指令之间共享一个控制器作为通信手段。
AngularJS的维基最佳实践也提到了这个:
Only use .$broadcast(), .$emit() and .$on() for atomic events
Events that are relevant globally across the entire app (such as a user authenticating or the app closing). If you want events specific to modules, services or widgets you should consider Services, Directive Controllers, or 3rd Party Libs
$scope.$watch() should replace the need for events
Injecting services and calling methods directly is also useful for direct communication
Directives are able to directly communicate with each other through directive-controllers
