野兽的 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> <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