首页 > 移动平台 > 详细

野兽的Angular Api 学习、翻译及理解 - - ngApp、ngBind、ngBindHtml、ngNonBindable

时间:2015-11-05 22:23:47      阅读:346      评论:0      收藏:0      [点我收藏+]

野兽的 ng api 学习 -- ngApp、ngBind、ngBindHtml、ngNonBindable

对于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">

        <span ng-bind="hello"></span>&nbsp;<span class="ng-bind:world"></span><br />

        <span ng-bind="hi()"></span>

    </div>

</div>

<script>

    angular.module("Demo", [])

    .controller("testCtrl", ["$scope", function ($scope) {

        $scope.hello = "Hello";

        $scope.world = "World";

        $scope.hi = function () {

            return "Hi!";

        };

    }])

</script>

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

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

 

ngBindHtml

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

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

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

使用代码:

<div ng-app="Demo">

    <div ng-controller="testCtrl">

        <div ng-bind-html="htmlValue"></div>

    </div>

</div>

<script>

    angular.module("Demo", ["ngSanitize"])

    .controller("testCtrl", ["$scope", function ($scope) {

        $scope.htmlValue = ‘<h2>This is H2</h2><p>Hello World!!!</p>‘;

    }])

</script>

注意点:需要引入angular- ngSanitize.js,这里出现了点小问题,控制台会报错,这里就不贴具体的报错图了...

野兽是把angular- ngSanitize.js的源码630-678行的过滤器代码注释掉才能正确执行的,后面换了版本,还是这样的问题,这个坑还不知道哪时候填,不过学习嘛,总是会遇到问题的,正常正常... 如果哪位小伙伴知道问题所在,可以回复下教下野兽哦  阿里嘎多~

 

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>

 

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

技术分享

野兽的Angular Api 学习、翻译及理解 - - ngApp、ngBind、ngBindHtml、ngNonBindable

原文:http://www.cnblogs.com/ys-ys/p/4940835.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!