[angular]指令之7bindToController

缺乏、安全感 2022-07-13 03:26 142阅读 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;
    });