8. AngularJs中数据的单项绑定 ng-bind,ng-cloak等等

  • 面试题:
    开启浏览器窗口,部分页面会闪烁一下。是因为页面在加载数据和解析是从上向下执行的,所以前面的界面信息先加载,后面的数据替换原先加载的数据。
    数据能识别插值语法,所以会被解析到。
    而不能识别ng的以下几种指令,所以不会被解析到,也就没有闪烁的现象。
<body ng-app = "app" ng-controller = "wmxController">

<!--数据的单向绑定:把模型中的数据展现在视图中-->
<!--单向绑定的四种方式-->

<!-- 1. {{属性}}插值语法  特点:会闪烁 可以绑定多个值 -->
<p> {{name}} --- {{name}} </p>

<!--2. ng-bind="属性" 特点:不会闪烁 智能绑定一个值-->
<p ng-bind = "name"></p>

<!--3. ng-cloak 特点:不会闪烁(浏览器验证时是会闪烁的)。可以绑定多个值-->
<p ng-cloak>{{name}} --- {{name}}</p>

<!--4. ng-bind-template="属性"  特点:不会闪烁,可以绑定多个值-->
<!--编译器不能识别,所以会报错。实际上没有错误-->
<p ng-bind-template="{{name}} --- {{name}}"></p>


<script src='angular.js'></script>

<script>

    var app = angular.module('app',[]);

    app.controller('wmxController',['$scope',function ($scope) {
        $scope.name = '我是小草莓';
    }])

</script>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,238评论 25 708
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,412评论 0 8
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,794评论 0 3
  • 记得自己小的时候,总是特别好强,什么都想争第一,并且都会努力、坚持到最后。慢慢长大了点,大概上初中了就发现自己做些...
    风雪7缘阅读 443评论 0 0
  • 暑假里我给儿子报了一个关于球类的夏令营,因为他曾经告诉我他喜欢足球、棒球。 夏令营一共5天,包括篮球、足球和棒球。...
    琢爱舟阅读 661评论 1 12

友情链接更多精彩内容