2.4.1 AngularJS自定义指令 scope参数等 - OhNaNaSun/angularBlog GitHub Wiki

自定义指令

不设置scope，即继承父作用域的情况

1. 指令和控制器怎样交互，相同的指令怎样调用不同（或者相同）控制器里的不同的方法。

<div ng-app="myApp">
    <div ng-controller="helloCtrl">
        <hello-world saywhat="sayhello()"></hello-world>    
    </div>
    <div ng-controller="shitCtrl">
        <hello-world saywhat = "sayshit()"></hello-world>
    </div>
</div>
var myApp = angular.module("myApp", []);
myApp
    .controller("helloCtrl", function($scope) {
        $scope.sayhello = function(){
        	console.log("hello")
        }
    })
    .controller("shitCtrl", function($scope){
    	$scope.sayshit = function(){
        	console.log("shit")
        }
    })
    .directive("helloWorld", function() {
        return {
            restrict: "AEC",
            replace: true,
            template: "<div><h3>hello or shit?</h3></div>",
            link: function(scope, elem, attr){
            	elem.bind("mouseenter", function(){
                    scope.$apply(attr.saywhat);
                })
            }
        }
    })

2. 指令之前如何交互，例子用到了独立作用域。

父级指令的controller暴露方法。子级通过link的第四个参数调用这个方法。

<div ng-app="myApp">
    <div ng-controller="myCtrl">
       <super strength>strength</super><br/>
       <super strength speed>strength+speed</super><br/>       
    </div>
</div>
var myApp = angular.module("myApp", []);
myApp
    .controller("myCtrl", function($scope) {
       
    })
   .directive("super", function(){
    	return {
        	scope: {},
        	restrict: "E",
        	controller: function($scope){
            	$scope.abi = []
            	this.addbis = function(b){
                	$scope.abi.push(b);
                }
            },
            replace: true,
            link: function(scope, elem, attr){
            	elem.bind("mouseenter", function(){
                	console.log(scope.abi);
                })
            }
        }
    })
    .directive("strength", function() {
        return {
           require: "^super",
            link: function(scope, elem, attr, superCtrl){
            	superCtrl.addbis("strength");
            }
        }
    })
    .directive("speed", function() {
        return {
           require: "^super",
            link: function(scope, elem, attr, superCtrl){
            	superCtrl.addbis("speed");
            }
        }
    })

独立scope, scope绑定策略.都会建立独立scope,通过绑定策略，满足获取父controller上的值等的不同需求。

@绑定字符串

单向绑定。获取父controller上的值。用link也可以实现。

<div ng-app="myApp">
    <div ng-controller="helloCtrl">
        <hello flavor = "{{ctrlFlavor}}">
        
        </hello>
    </div>
</div>
var myApp = angular.module("myApp", []);
myApp
    .controller("helloCtrl", function($scope) {
        $scope.ctrlFlavor = "sss";
    })
    .directive("hello", function() {
        return {
            restrict: "AEC",
            replace: true,
            template: "<div>{{flavor}}</div>",
            //link: function(scope, elem , attr){
            //	scope.flavor = attr.flavor
            //}
            scope: {
            	flavor: "@"
            }
        }
    })

=双向绑定

<div ng-app="myApp">
    <div ng-controller="helloCtrl">
        <input type="text" ng-model="ctrlFlavor">
        <hello flavor = "ctrlFlavor">
        
        </hello>
    </div>
</div>
var myApp = angular.module("myApp", []);
myApp
    .controller("helloCtrl", function($scope) {
        $scope.ctrlFlavor = "sss";
    })
    .directive("hello", function() {
        return {
            restrict: "AEC",
            replace: true,
            template: "<div><input type='text' ng-model='flavor'/></div>",   
            scope: {
            	flavor: "="
            }
        }
    })

&调用父层scope里的方法

可以用1中的

<div ng-app="myApp">
    <div ng-controller="helloCtrl">
        <hello-world say="saywhat(name)"></hello-world>    
        <hello-world say = "saywhat(name)"></hello-world>
    </div>
</div>
var myApp = angular.module("myApp", []);
myApp
    .controller("helloCtrl", function($scope) {
        $scope.saywhat = function(name){
        	console.log(name)
        }
    })
    .directive("helloWorld", function() {
        return {
            restrict: "AEC",
            replace: true,
            scope: {say: "&"},
            template: "<div><input type='text' ng-model='username'/>"+
            "<button ng-click='say({name:username})'></button></div>",
            link: function(scope, elem, attr){
            	
            }
        }
    })
⚠️ **GitHub.com Fallback** ⚠️