AngularJS筆記整理獨立 Scope

時間 2019-11-17

標籤 angularjs 筆記整理獨立 scope 欄目 AngularJS 简体版

原文原文鏈接

Scope獨立，保持指令的獨立性，不相互干擾，只須要加一個空Scope的對象css

Scope的綁定策略html

@ 把當前屬性做爲字符串傳遞，你還能夠綁定來自外層Scope的值，在屬性值中插入{{}}便可bootstrap

= 與父scope中的屬性進行雙向綁定app

& 傳遞一個來自父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/>' } });