angularjs scope绑定策略

最新推荐文章于 2019-04-27 16:48:24 发布

原创最新推荐文章于 2019-04-27 16:48:24 发布 · 366 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

140 篇文章

订阅专栏

本文通过一个具体的示例，深入探讨了AngularJS中控制器(controller)与自定义指令(directive)的Scope如何进行数据绑定和交互。具体展示了如何在控制器中设置初始值，并通过双向数据绑定将该值传递给指令，同时演示了如何在指令中修改并反映回控制器的数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制器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"/>'     
    }
});