angularjs/ng-bind如何保留换行符
不同于jquery只是一个加强和简化前端开发的类库，angularjs是一个完整web前端框架，所以学习曲线高了很多。
angularjs给我的感觉类似于Java的Spring框架，处于中心容器位置粘合其他组件，其内置的很多组件已经可以满足一般场景，特殊场景我们可以按照框架思路扩展。
下面从最基础的内容走起：
!DOCTYPE html
html ng-app
head
meta charset="utf-8"
titleng-bind directive/title
/head
body ng-controller="HelloController"
div
p直接输出字符串字面值/p
Hello {{"World"}}
hr
/div
div
p使用占位符输出变量/p
Hello {{greeting}}
hr
/div
div
p使用ng-bind指令输出变量/p
Hello span ng-bind="greeting"/span
hr
/div
script src="../lib/angularjs/1.2.26/angular.min.js"/script
script
function HelloController($scope) {
$scope.greeting = "World";
}
/script
/body
/html
ng-app声明一个angularjs的模块，并限定在声明html标签的范围内。
ng-controller是在模块中声明一个angularjs的控制器，控制器可以有多个，但上下文是隔离的，应尽可能缩小控制器的作用范围。
{{}}是angularjs的插值语法，类似于JSP的EL表达式${}。第一个输出因为"World"是个字面值，程序会直接输出；第二个输出因为greeting是在控制器里定义的一个变量，所以也会输出变量对应的值，一样是World；第三个输出利用了angularjs内置的ng-bind属性指令，最终结果等价于{{}}，但注意指令=后面是字符串，不要写错。
js里面的HelloController和body上面的指令对应，入参$scope是框架提供的一个服务，代表当前控制器的上下文，还有其他类似服务，框架会自动注入，以后慢慢了解。方法体只有一行，是在$scope上定义了一个变量，就是html代码里引用的变量。
这一篇很简单，代码复制了就能运行。注意angular.min.js是1.2分支最新的版本，同样的代码用1.3.0版本无法运行，原因未知，可能1.3.0还不是最终Release版本有关。
ngmodel和ngbind的区别
ngModel和ngBind的区别：ngModel 用来绑定input、select、textarea等form表单控件，ngBind是绑定文本内容的(不包括html，如果要绑定html需要使用ngBindHtml)， 这里大家会发现表述的时候使用的是ngSubmit、ngClick、ngModel等(这些都是ng定义的指令)但是在html中却写成了ng-submit、ng-click等，这是ng的一个规则(当我们自己定义指令的时候也是一样的规则，如menuContent在html内使用的时候要写成menu-content)，跟jQuery的css是一样的，其次这里出现的ngShow指令是指当指定的值或表达式为真的情况下，该元素是显示的，否则隐藏，跟它对应的属性是ngHide，其次ngBind绑定的值也同样可以是值也可以是表达式(大部分指令的名字都是很容易理解的)。
AngularJS的数据双向绑定是怎么实现的
Angular js (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。双向数据绑定可能是angularjs最酷最实用的特性,将MVC的原理展现地淋漓尽致.
AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.
在html中:
body ng-app="ngApp"
div ng-controller="ngCtl"
label ng-model="myLabel"/label
input type="text" ng-model="myInput" /
button ng-model="myButton" ng-click="btnClicked"/button
/div
/body
在js中:
// angular app
var app = angular.module("ngApp", [], function(){
console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
console.log("ng-controller : ngCtl");
$scope.myLabel = "text for label";
$scope.myInput = "text for input";
$scope.btnClicked = function() {
console.log("Label is " + $scope.myLabel);
}
}]);
如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会对应于一个作用域(可以用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都可以通过$scope的方式跟js中的属性和方法进行绑定.
这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.
这样的方式,使用起来真的非常方便. 我们仅关心HTML标签的样式, 及其对应在js中angular controller作用域下绑定的属性和方法. 仅此而已, 将众多复杂的DOM操作全都省略掉了.
这样的思想,其实跟jquery的DOM查询和操作是完全不一样的, 因此也有很多人建议用AngularJS的时候,不要混合使用jQuery. 当然, 二者各有优劣, 使用哪个就要看自己的选择了.
NG中的app相当于一个模块module, 在每个app中可以定义多个controller, 每个controller都会有各自的作用域空间,不会相互干扰.
看下边这段html:
div ng-app="dataApp"
单价： input type="number" min=0 ng-model="price" ng-init="price = 299"br
数量： input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"br
总价： {{ quantity * price }}
/div
你会惊喜地发现, 甚至不用写一行的JS代码, 即可完成计算并在界面展示结果.
即: 在前端html中使用{{ }}括起来的变量, 是跟AngularJS中对应的controller作用域内的属性绑定在一起的. 实际上,{{}}等同于ng-bind指令, 即ng-bind="myData"就能将NG中的myData数据跟前端对应元素绑定在一起.这样的话, 可以非常方便地做到从NG中获取任意数据并实时展示在页面上了.
另外, $scope对象还提供了一个$apply方法, 用于进行html页面上的更新, 使用方式为:
$scope.$apply(function(){
$scope.myValue = "NewValue";
});
$scope对象, 我们可以理解为NG框架中的一个作用域对象, 在该作用域内可以做到数据和视图的相互绑定, 同时又能与其他$scope对象的作用域隔离开来.
当然, $scope也可以实现继承, 这部分内容在以后接触NG框架中其他对象的时候再分别做记录
“ngmodel”和“ngbind”有什么区别？
ng-bind
1、ng-bind作用是在页面上显示控制器中的数据，是单向绑定的。
2、ng-bind与花括号表达式{{}}是等价的。
3、ng-bind使用给定的变量或表达式的值来替换 HTML 元素的内容。
ng-model
1、ng-model作用是进行数据双向绑定。
2、ng-model绑定了 HTML 表单元素到 scope 变量中。
ng-bind-html过滤了style，怎么解决
ng-bind-html过滤了style的解决方法是引入$sce模块，具体使用如下：
$scope.docHtml= $sce.trustAsHtml(data);
这样就可以将值转换为特权所接受并能安全地使用“ng-bind-html”了。
1、完整代码使用如下：
script src="apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"/script，前面加上http://
script src="apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"/script前面加上http://body
div ng-app="myApp" ng-controller="myCtrl"
p ng-bind-html="myText"/p
/div
script
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: h1John Doe/h1";
});
/script
angular.js中插值语法和ng-bind以及ng-model的区别
首先呢，插值语法也就是{{}}和ng-bind基本上是没有区别的。
主要区别在于，使用花括号语法时，在AngularJS使用数据替换模板中的花括号时，第一个加载的页面，通常是应用中的index.html，其未被渲染的模板可能会被用户看到。而使用ng-bind方法不会遇到这种问题。
原因是，浏览器需要首先加载index.html页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容。
所以，对于index.html页面中的数据绑定操作，建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
而ng-model和ng-bind的区别就在于ng-bind是从$scope - view的单向绑定 ng-modle是$scope - view的双向绑定。