1. 程式人生 > >angularjs scope繫結策略

angularjs scope繫結策略

控制器controller中的的scope與controller中指令的scope的互動

ScopeEqual.html

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
    <div ng-controller="MyCtrl">
        Ctrl:
        <br>
        <input type="text" ng-model="ctrlFlavor">
        <br>
        Directive:
        <br>
        <drink flavor="ctrlFlavor"></drink>
    </div>  
    <script src="js/angular-1.3.0.js"></script>
    <script src="ScopeEqual.js"></script>
</body>
</html>

ScopeEqual.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"/>'     
    }
});