我有一个指令，这里是代码：
.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);
}
}
})
如果要使用隔离的范围，可以使用控制器作用域中的变量的双向绑定传递控制对象。还可以使用相同的控件对象在一个页面上控制同一指令的几个实例。
angular.module('directiveControlDemo',[])
.controller('MainCtrl',function($scope) {
$scope.focusinControl = {};
})
.directive('focusin',function factory() {
return {
restrict: 'E',template: '<div>A:{{internalControl}}</div>',scope: {
control: '='
},link: function(scope,attrs) {
scope.internalControl = scope.control || {};
scope.internalControl.takenTablets = 0;
scope.internalControl.takeTablet = function() {
scope.internalControl.takenTablets += 1;
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
<div ng-controller="MainCtrl">
<button ng-click="focusinControl.takeTablet()">Call directive function</button>
<p>
<b>In controller scope:</b>
{{focusinControl}}
</p>
<p>
<b>In directive scope:</b>
<focusin control="focusinControl"></focusin>
</p>
<p>
<b>Without control object:</b>
<focusin></focusin>
</p>
</div>
</div>
