Angular 表达式

和JavaScript表达式的区别

• 值是根据scope内的
• 在js中调用未定义的属性会报错，而在angular中只会提示undefined或null
• 可以使用过滤器
• 不能使用 条件判断、循环、异常，但是可以使用三元表达式
• 不能声明函数，如ng-init
• 不能使用正则表达式，除非使用ng-pattern
• 不能使用new运算符
• 不能使用Bitwise、，或者void
• 具有新的模板表达式运算符，比如| 、 ?. ``和!

|管道操作符

在绑定之前，表达式的结果可能需要一些转换。例如，可能希望把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。

I am {{employee.name | uppercase}} //I am RODCHEN

安全导航操作符 ( ?. ) 和空属性路径

Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值
例如a)中的例子，如果employee是null，页面会发生是什么呢？
"I am"依然会渲染，但是会报错。

TypeError: Cannot read property 'name' of null in [null]. 

这时我们就可以使用安全导航操作符来规避这个错误。

I am {{employee?.name | uppercase}}

非空断言操作符（!）

如果类型检查器在运行期间无法确定一个变量是null或undefined，那么它也会抛出一个错误。 我们自己可能知道它不会为空，但类型检查器不知道。 所以我们要告诉类型检查器，它不会为空，这时就要用到非空断言操作符。
Angular 模板中的**非空断言操作符（!）也是同样的用途。

例如，在用*ngIf来检查过hero是已定义的之后，就可以断言hero属性一定是已定义的。

src/app/app.component.html
 content_copy
<!--No hero, no text -->
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>

在 Angular 编译器把你的模板转换成 TypeScript 代码时，这个操作符会防止 TypeScript 报告 "hero.name可能为null或undefined"的错误。
与安全导航操作符不同的是，非空断言操作符不会防止出现null或undefined。 它只是告诉 TypeScript 的类型检查器对特定的属性表达式，不做 “严格空值检测”。
如果我们打开了严格控制检测，那就要用到这个模板操作符，而其它情况下则是可选的。

绑定语法

绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

一次绑定

为什么要有一次绑定

双向绑定魔法的实现完全依赖于digest循环，当digest循环被触发时，AngularJS将会去处理遍历当前作用域和子作用域中的所有监听器，然后通过检查模型中发生的变化来更新DOM中的值，直到模型不再发生变化为止。一旦$digest循环执行完成，浏览器会重新渲染DOM来反应模型数据变化。

由于AngularJS使用监听器来实现数据绑定。当监听器越来越多时，可能会出现一些性能上的问题。由于在注册监听器使，同时会注册一个回调函数，以便在$digest循环执行时能够相应的更新视图。也就是说，监听器越多，AngularJS需要处理的回调函数也就越多。

一次性数据绑定表达式可以在数据稳定之后，不需要在$digest循环中重计算…

如何使用一次绑定

非常简单，只需要在表达式前加上双冒号::即刻

<p>Hello {{::name}}!</p>

<ul>
  <li ng-repeat="item in ::items | orderBy:'name'">{{item.name}};</li>
</ul>

someModule.directive('someDirective', function() {
  return {
    scope: {
      name: '=',
      color: '@'
    },
    template: '{{name}}: {{color}}'
  };
});

<div some-directive name="::myName" color="My color is {{::myColor}}"></div>

参考

https://www.cnblogs.com/xiaoqi/p/angular-quick-study-part3.html

https://blog.csdn.net/it_rod/article/details/79429457
https://angular.cn/guide/template-syntax#html-in-templates
https://ultimatecourses.com/blog/angular-one-time-binding-syntax
https://blog.csdn.net/qianxing111/article/details/79971544