zoukankan      html  css  js  c++  java
  • --@angularJS--独立作用域scope绑定策略之=符策略

    1、index.html:

    <!DOCTYPE HTML>
    <html ng-app="app">
    <head>
        <title>scopeEqual</title>
        <meta charset="utf-8">    
        <link rel="stylesheet" href="../css/bootstrap.css">
        <script src="../js/angular.js"></script>
    </head>
    <body>
    <!-- 下面是指令scope作用域=符demo. -->
    <div ng-controller="myCtrl">
        <label for="" class="control-label">控制器中的内容:</label>
        <input type="text" ng-model="ctrlFlavor" />
        <label for="" class="control-label">指令中的内容:</label>
        <drink flavor="ctrlFlavor"></drink>
    </div>
    <script src="./scopeEqual.js"></script>
    </body>
    </html>

    2、scopeEqual.js:

    var myModule = angular.module("app",[]);

    myModule.controller('myCtrl', ['$scope', function($scope){
        $scope.ctrlFlavor = "百事达";
    }]);
    myModule.directive('drink',function(){
        return {
            restrict: 'AE',
            scope:{
                fla:'=flavor'//还是传递同标签内的属性值,就能形成双向数据绑定.在独立作用域中同样是ng-model中的值,要想形成双向ng-model数据绑定的赋值形式的话必须用=号赋属性值给ng-model才行.fla是ng-model值,标签属性flavor获取的是控制器中所赋的值
            },
            template: '<input type="text" ng-model="fla" />',
            // link: function(scope, elm, attrs) {
            //     scope.fla = scope.ctrlFlavor;//这样写虽然能把控制器中的初始值赋给ng-model="fla"中的fla,但是与上一个input里面的ng-model="ctrlFlavor"形成不了双向数据绑定,就是你我均独立,互不干扰,互不影响,所以要实现双向数据绑定,还得借助于scope:里面的等号"="双向绑定机制
            // }
        }
    });

  • 相关阅读:
    MySQL 多列索引优化小记
    Spring MVC + Security 4 初体验(Java配置版)
    Java程序通过代理访问网络
    Spring RESTful + Redis全注解实现恶意登录保护机制
    WinSCP 中普通用户以 root 身份登录 Linux
    Linux下修改系统时区
    Git如何检出指定目录或文件
    朴素贝叶斯
    console.log 被重写覆盖以后如何恢复
    MongoDB 基础命令使用学习记录
  • 原文地址:https://www.cnblogs.com/koleyang/p/4516725.html
Copyright © 2011-2022 走看看