[angular]指令之7bindToController

最新推荐文章于 2022-12-01 12:44:23 发布

灵眼儿上方

最新推荐文章于 2022-12-01 12:44:23 发布

阅读量1.2k

点赞数

分类专栏： java相关文章标签： angular 指令 bindToController

本文链接：https://blog.csdn.net/liyanq528/article/details/53815929

版权

java相关专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="testDirectiveBindToController">
<head>
    <meta charset="UTF-8">
    <title>测试DirectiveBindToController</title>
    <script src="../frameWork/angular.js"></script>
    <script src="../testDirective/testDirectiveBindToController.js"></script>
</head>
<body ng-controller="testDirectiveBindCtr">
<span>标题:</span> <input ng-model="title"><br>
<span>内容:</span> <input ng-model="content"><br>
<h3>内容1:没有用bindToController的情况</h3>
<test-directive-none-bind title={{title}} content="{{content}}"></test-directive-none-bind>

<h3>内容2:bindToController＝true,且不设置标签属性的情况</h3>
<test-directive-simple-bind></test-directive-simple-bind>

<h3>内容3:bindToController＝true,且设置标签属性的情况</h3>
<test-directive-simple-bind title="{{title}}"content="{{content}}"></test-directive-simple-bind>

<h3>内容4:bindToController＝obj,设置标签属性,设置scope对象，但没有bindToController的权限高</h3>
<test-directive-obj-bind title="title" content="content"></test-directive-obj-bind>
</body>
</html>

/**
 * 由于directive在angular中的地位之重，所以得认真对待。但理解难啊，所以决定逐个属性进行实例分析
 * directive实例分析第七篇：bindToController
 * Created by liyanq on 16/12/22.
 */

/**bindToController是angular1.3新加的，目的是为了减少指令中对scope的依赖。
 * 1，原型：和scope一样，能为bool和obj。
 * 2，必要性，可以减少对scope中对依赖。
 * 3，必要性，可以在controller的构造函数中，提供默认值。读取父scope前值不为空了。(应该最重要一点吧？)
 * 4，注意点，当值为obj的时候，可以覆盖scope的绑定策略，以bindToController为准，但html中与父scope打交道的还是scope.
 * 5，注意点，scope定义与外部绑定策略，bindToController定义自己内部绑定策略，为true时以scope为准。
 * */

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

app.controller("testDirectiveBindCtr", function ($scope) {
    $scope.title = "默认标题";
    $scope.content = "默认内容";
}).directive("testDirectiveNoneBind", function () {
    var dir = {};
    dir.restrict = "E";
    dir.replace = true;
    dir.scope = {
        title: "@",
        content: "@"
    };
    dir.template = "<div>我的标题是:{{title}}" +
        "<div>我的内容是:{{content}}</div></div>";
    return dir;
}).directive("testDirectiveSimpleBind", function () {
    var dir = {};
    dir.bindToController = true;
    dir.restrict = "E";
    dir.replace = true;
    dir.controllerAs = "ctr";
    dir.scope = {
        title: "@",
        content: "@"
    };
    dir.controller = function () {
        this.title = "controller中设置标题";
        this.content = "controller中设置内容";
        this.onChangeValue = function () {
            this.title = "绑定为true改变的标题";
            this.content = "绑定为true改变的内容";
        }
    };
    dir.template = "<div>我的标题是:{{ctr.title}}" +
        "<div>我的内容是:{{ctr.content}}</div>"+
        "<button ng-click='ctr.onChangeValue()'>改变标题和内容</button></div>";
    return dir;
}).directive("testDirectiveObjBind", function () {
    var dir = {};
    dir.bindToController =true;
    dir.restrict = "E";
    dir.replace = true;
    dir.controllerAs = "ctr";
    dir.scope = {
        title: "=",
        content: "="
    };
    dir.controller = function () {
        this.title = "controller中设置标题";
        this.content = "controller中设置内容";
        this.onChangeValue = function () {
            this.title = "绑定为obj改变的标题";
            this.content = "绑定为obj改变的内容";
        }
    };
    dir.template = "<div>我的标题是:{{ctr.title}}" +
        "<div>我的内容是:{{ctr.content}}</div>"+
        "<button ng-click='ctr.onChangeValue()'>改变标题和内容</button></div>";
    return dir;
});