zoukankan      html  css  js  c++  java
  • Angular

    对于ng-系列的指令,每篇文章写2-5个吧,不然显得文章好短....

    ngApp

    使用这个指令自动启动一个AngularJS应用。ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根节点如<body>或<html >标签的。

    格式:ng-app=”value”

    value:当前应用程序模块的名称。

    使用代码:

      <div ng-app="Demo"></div>

    需要注意的是:1.3版本以前的是可以不设置值的,1.3只后就是必需的了,而且该模块还得被定义,网上很多部分的教程是1.3版本之前的,所以大家在用的时候注意下版本问题。 

    这个指令野兽的理解其实他就是告诉Angular,应用程序的根节点在我这,并且在1.3版本后告诉Angular你该执行的模块的名称是什么。 

     

    ngBind

    ngBind告诉Angular去用指定的表达式的值去替换指定元素内的文本内容,并且当表达式的值变化时让文本内容也跟着变化。

    格式:ng-bind=”value”   class="ng-bind:value;"

    value:表达式/值

    使用代码:

      <div ng-app="Demo">
         <div ng-controller="testCtrl as ctrl">
            <span ng-bind="ctrl.hello"></span>&nbsp;<span class="ng-bind:ctrl.world"></span><br />
            <span ng-bind="ctrl.hi()"></span>
         </div>
      </div>
    复制代码
      (function () {
        angular.module("Demo", [])
        .controller("testCtrl", testCtrl);
        function testCtrl() {
            var vm = this;
            vm.hello = "Hello";
            vm.world = "World";
            vm.hi = function () {
                return "Hi!";
            };
        };
      }());
    复制代码

    ngBind相对于{{}}形式绑定的好处就是当你快速刷新或者打开页面那瞬间,不会将绑定代码暴露。 

    这个不用过多说明,直接就能看得出这是个绑定数据的指令。

    ngBindHtml

    创建一个将innerHTML函数所执行的结果绑定到页面指定元素的绑定方式。

    格式: ng-bind-html=”value”

    value: 将会被html转义并且绑定的字符串。

    配合$sce使用:

      .hello {  300px; height: 300px; background: #ccc; color: red; }
      <div ng-app="Demo">
          <div ng-controller="demoCtrl as ctrl">
              <div ng-bind-html="ctrl.htmlText"></div>
          </div>
      </div>
    复制代码
      (function () {
        angular.module("Demo", [])
        .controller("testCtrl", ["$sce",testCtrl]);
        function testCtrl($sce) {
          var vm = this;
          vm.htmlText = '<div class="hello">Hello Wrold</div>';// Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context.
          vm.htmlText = $sce.trustAsHtml(vm.htmlText); // ok 能正常输出html了
        };
      }());
    复制代码

    引入angular-ngSanitize.js使用:

      <div ng-app="Demo">
        <div ng-controller="testCtrl as ctrl">
            <div ng-bind-html="ctrl.htmlValue"></div>
        </div>
      </div>
    复制代码
      (function () {
        angular.module("Demo", ["ngSanitize"])
        .controller("testCtrl", [testCtrl]);
        function testCtrl() {
          var vm = this;
          vm.htmlText = '<div class="hello">Hello Wrold</div>';
        };
      }());
    复制代码

    ngNonBindable

    这个指令告诉Angular不要去对当前的Dom元素进行编译或者绑定值。当元素的内容需要展示Angular指令和绑定但是又得让Angular忽略他的执行的时候,这个指令就有用了。比如你有个网站,需要展示代码片段的时候。

    格式:ng-non-bindable

    使用代码:

      <span ng-bind="greeting"></span>
      <span ng-bind="greeting" ng-non-bindable></span>
      <span ng-non-bindable >{{greeting}}</span>

    写文章不是为了写出来给别人看才写的,把自己的学习过程记录下来,对学习做个总结,让自己记的更深些,以后还可以回过来看看;如果有人愿意看看的话也可以来个交流,分享分享大家不同的理解和经验..

  • 相关阅读:
    如何关闭内存自动释放池ARC
    你怀疑过“温水煮青蛙”的故事吗
    程序员应该加入的3个QQ群
    简述Oracle 11g 新特性
    ViewState、UpdatePanel及控件OnPre之间的纠葛
    今天,我看到一组图解释“ 什么是博士?”
    Java将何去何从
    给新手朋友 推荐几本书(从C#入门到SQL及设计模式)
    最新版 智能电脑键盘屏幕全记录 免费下载
    C#中两个问号和一个问号
  • 原文地址:https://www.cnblogs.com/koleyang/p/5053952.html
Copyright © 2011-2022 走看看