[angular]指令之7bindToController

来源：互联网发布：css3 知乎编辑：程序博客网时间：2024/05/17 02:26

<!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;});

0 0