AngularJS笔记整理 独立 Scope

Scope独立，保持指令的独立性，不相互干扰 ，只需要加一个空Scope的对象

 

Scope的绑定策略

@ 把当前属性作为字符串传递，你还可以绑定来自外层Scope的值，在属性值中插入{{}}即可

= 与父scope中的属性进行双向绑定

& 传递一个来自父scope的函数，稍后调用

 

HTML  @绑定（展示控制里的内容）

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <drink flavor="{{ctrlFlavor}}"></drink>
        </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="ScopeAt.js"></script>
</html>

 

JS

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
        restrict:'AE',
        scope:{
            flavor:'@'
        },
        template:"<div>{{flavor}}</div>"
        // ,
        // link:function(scope,element,attrs){
        //     scope.flavor=attrs.flavor;
        // }
    }
});

 

 

HTML =绑定（双向绑定）

 

 1 <!doctype html>
 2 <html ng-app="MyModule">
 3     <head>
 4         <meta charset="utf-8">
 5         <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
 6     </head>
 7     <body>
 8         <div ng-controller="MyCtrl">
 9             Ctrl:
10             <br>
11             <input type="text" ng-model="ctrlFlavor">
12             <br>
13             Directive:
14             <br>
15             <drink flavor="ctrlFlavor"></drink>
16         </div>
17     </body>
18     <script src="framework/angular-1.3.0.14/angular.js"></script>
19     <script src="ScopeEqual.js"></script>
20 </html>

 

JS

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
    return {
        restrict:'AE',
        scope:{
            flavor:'='
        },
        template:'<input type="text" ng-model="flavor"/>'
    }
});

 

HTML &绑定

 

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
        </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="ScopeAnd.js"></script>
</html>

 

JS

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.sayHello=function(name){
        alert("Hello "+name);
    }
}])
myModule.directive("greeting", function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input type="text" ng-model="userName" /><br/>'+
                 '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
    }
});

 

posted @ 2016-10-18 11:30  星河mio  阅读(160)  评论(0)    收藏  举报