Archive for the category: 6.前端开发

通常我们知道指令默认是可以跟外界通信的.比如:

<div ng-controller="mytest">
    <test></test>
</div>

test自定义指令是可以访问到mytest控制器的scope
要想把test自定义指令独立作用域,也就是说跟mytest切断关系:可以加上指令的参数scope:{},这样就能做到互不相干了
但是也不可能完成切断关系,总会有某些东西要互相交互,如果想跟mytest控制器的某个scope属性交互,就要用绑定策略

下面来介绍三种绑定策略的做法

1.@符号
“@”是通过DOM的属性来跟mytest控制器交互绑定一起

<div ng-controller="mytest">
    <test></test>
</div>

 

app.controller("mytest", function ($scope) {
    $scope.name = "jack";
    $scope.age = 25;
});
app.directive("test",function(){
    return {
        restrict : "E",
        template : '<div name="{{name}}"></div>',
        replace : true,
        scope : {
            name : "@"
        },
        controller : function($scope){
            console.log($scope.name);  //"jack"
            console.log($scope.age);   //age是undefined,因为没有跟mytest进行交互
        },
        link : function ($scope) {
            console.log($scope.name); //"jack"
            console.log($scope.age);  //age是undefined,因为没有跟mytest进行交互
        }
    }
});

重点:
scope : {
name : “@”
}
scope对象声明了一个属性name,然后在DOM元素的属性加上一个name,(注意两边的名字必须要一致)这样就可以进行交互操作
点击查看完整代码

2.=符号
“=”有双重绑定的功能,比如mytest控制器与test子指令进行双重绑定(单个字符串、对象都是有效的)下面代码用对象来演示

<div ng-controller="mytest">
    父：<input type="text" ng-model="data.name" />
    <test></test>
</div>

 

app.controller("mytest", function ($scope) {
    $scope.data = {
        name : "jack",
        age : 25
    }
});
app.directive("test",function(){
    return {
        restrict : "E",
        template : '<div data="data">子指令:<input ng-model="data.name" /></div>',
        replace : true,
        scope : {
            data : "="
        },
        controller : function($scope){
            console.log($scope.data);  //Object {name: "jack", age: 25}
        },
        link : function ($scope) {
            console.log($scope.data); //Object {name: "jack", age: 25}
        }
    }
});

3.&符号
“&”的意思是子指令能调用父控制器的方法,这里的指令template元素点击调用控制器的getName方法

<div ng-controller="mytest">
    <test></test>
</div>

 

app.controller("mytest", function ($scope) {
    $scope.getName = function(){
        console.log("jack");
    }
});
app.directive("test",function(){
    return {
        restrict : "E",
        template : '<div get-name="getName()">子指令:<a href="javascript:void(0)" ng-click="getName()">点击调用父方法</a></div>',
        replace : true,
        scope : {
            getName : "&"
        },
        controller : function($scope){
            $scope.getName();  //"jack"
        },
        link : function ($scope) {
            $scope.getName(); //"jack"
        }
    }
});