zoukankan      html  css  js  c++  java
  • [AngularJS

    The post we have: http://www.cnblogs.com/Answer1215/p/4185504.html gives a breif introduce about bindToController on the directive.

    Here is a blog about bindToController from thoughtram which explains in detail why bingToController comes into handy and why controllerAs syntax is important.

    Here is the part which useful to myself

    This is a directive with an isolated scope that defines how its scope properties are bound. Alright, let’s say we have directive with an isolated scope, a controller and a template that uses the controller properties accordingly:

    app.directive('someDirective', function () {
      return {
        scope: {},
        controller: function () {
          this.name = 'Pascal'
        },
        controllerAs: 'ctrl',
        template: '<div>{{ctrl.name}}</div>'
      };
    });

    Easy. That works and we knew that already. Now to the tricky part: what ifname should be two-way bound?

    app.directive('someDirective', function () {
      return {
        scope: {
          name: '='
        },
        // ...
      };
    });

    Changes to isolated scope properties from the outside world are not reflected back to the controllers’ this object. What we need to do to make this work in 1.2, is to use the $scope service to re-assign our scope values explicitly, whenever a change happens on a particular property. And of course, we mustn’t forget to bind our watch callback to the controllers’ this:

    app.directive('someDirective', function () {
      return {
        scope: {
          name: '='
        },
        controller: function ($scope) {
          this.name = 'Pascal';
    
          $scope.$watch('name', function (newValue) {
            this.name = newValue;
          }.bind(this));
        },
        // ...
      };
    });

    Here we go… the $scope service we initially got rid off is now back. If you now think this is crazy, especially when considering that this is just one scope property and in a real world directive you usually have more than one, then my friend, I agree with you.

    Luckily, this is no longer a problem in Angular 1.3!

    app.directive('someDirective', function () {
      return {
        scope: {
          name: '='
        },
        controller: function () {
          this.name = 'Pascal';
        },
        controllerAs: 'ctrl',
        bindToController: true,
        template: '<div>{{ctrl.name}}</div>'
      };
    });
  • 相关阅读:
    CSS3新子代选择器
    css3新选择
    procixx和最近调试的坑
    procixx地址
    从零开始之uboot、移植uboot2017.01(二、从入口分析流程)
    从零开始之uboot、移植uboot2017.01(一、移植前的准备)
    四、移植 JZ2440 开发板
    三、编译第一步 make xxx_defconfig——Makefile.build 脚本
    二、编译第一步 make xxx_defconfig
    一、配置介绍
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4207460.html
Copyright © 2011-2022 走看看