AngularJs ngApp、ngBind、ngBindHtml、ngNonBindable

简介: ngApp 使用这个指令自动启动一个AngularJS应用。ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根节点如或标签的。 格式:ng-app=”value” value:当前应用程序模块的名称。

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" ng-controller="testCtrl as ctrl">
     <span ng-bind="ctrl.hello"></span>&nbsp;<span class="ng-bind:ctrl.world"></span><br />
     <span ng-bind="ctrl.hi()"></span>
  </div>
  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.hello = "Hello";
        this.world = "World";
        this.hi = function () {
            return "Hi!";
        };
    };
  }());

ngBind相对于{{}}形式绑定的好处就是当你快速刷新或者打开页面那瞬间,不会将绑定代码暴露;相对与{{}}形式来绑定的坏处就是需要载体。所以根据需求来选择用哪个也行,或者ng-cloak避免闪烁。 

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

ngBindHtml

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

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

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

配合$sce使用:

 .hello { width: 300px; height: 300px; background: #ccc; color: red; }
  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
        <div ng-bind-html="ctrl.htmlText"></div>
  </div>
  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", ["$sce",testCtrl]);
    function testCtrl($sce) {
      this.htmlText = '<div class="hello">Hello Wrold</div>';// Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context.
      this.htmlText = $sce.trustAsHtml(this.htmlText); // ok 能正常输出html了
    };
  }());

引入angular-ngSanitize.js使用:

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <div ng-bind-html="ctrl.htmlValue"></div>
  </div>
  (function () {
    angular.module("Demo", ["ngSanitize"])
    .controller("testCtrl", [testCtrl]);
    function testCtrl() {
      this.htmlText = '<div class="hello">Hello Wrold</div>';
    };
  }());

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>
相关文章
|
JSON API 数据格式
5分钟构建API接口服务 | python小知识
Flask是python中轻量的web框架,Flask的两个核心模块除了模板渲染之外就是请求响应处理,其中请求响应处理是由 Werkzeug(WSGI 工具库)完成,而模板渲染是由Jinja(模板渲染库)完成。 Flask因为轻量灵活,用来构建API接口十分合适
11161 10
5分钟构建API接口服务 | python小知识
|
存储 缓存 NoSQL
数据库性能优化中的缓存优化
数据库性能优化中的缓存优化
|
Linux 测试技术 项目管理
产品、项目、平台、系统、应用的关系
产品、项目、平台、系统、应用的关系
1231 0
|
存储 前端开发 JavaScript
纯前端实现腾讯cos文件上传功能
在前端开发中文件上传是经常会遇到的,并且多数情况会使用第三方平台来存储文件,腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK
1501 0
|
机器学习/深度学习 自然语言处理 搜索推荐
"智能革命新篇章:揭秘大模型私有化垂直技术,如何成为企业转型升级的超级引擎与秘密武器"
【10月更文挑战第17天】大模型私有化垂直技术通过在企业私有环境中部署并定制大型语言模型,结合企业特定数据和业务逻辑,提升数据安全、服务定制化、处理效率及持续迭代能力,助力企业在客户服务、风险管理、智能制造及个性化营销等方面实现智能化转型,推动业务高效运营与创新发展。
386 1
|
11月前
|
开发框架 .NET 测试技术
C# 一分钟浅谈:GraphQL 数据类型与查询
本文介绍了GraphQL的基本概念、数据类型及查询方法,重点从C#角度探讨了GraphQL的应用。通过Hot Chocolate库的实例,展示了如何在ASP.NET Core中实现GraphQL API,包括安装、定义Schema、配置及运行项目。文中还讨论了常见问题与解决方案,旨在帮助开发者更好地理解和使用GraphQL。
181 2
|
安全 物联网 网络安全
智能家居安全:物联网设备的风险与防护
在智能家居的便捷生活背后,潜藏着不容忽视的安全隐患。本文将深入探讨智能物联网(IoT)设备的安全问题,揭示数据泄露、隐私侵犯等风险点,并提供实用的防护措施。从加强密码管理到部署网络监控系统,我们旨在为家庭用户提供一套全面的安全解决方案,确保技术带来的便利不会成为安全的代价。
|
云安全 监控 安全
什么是蜜罐,在当前网络安全形势下,蜜罐能提供哪些帮助
蜜罐作为一种主动防御技术,在网络安全领域发挥着越来越重要的作用。通过部署蜜罐,组织可以及时发现并应对网络攻击,提高网络的安全防护能力。同时,蜜罐也可以作为一个研究工具,帮助安全研究人员了解攻击者的行为和技术。
|
架构师 Serverless 程序员
Forrester Wave™ 扫盲贴
Forrester Wave™ 是为考虑采购技术解决方案的买方提供的专业参考调研报告,面向成熟技术市场。
2526 99
Forrester Wave™ 扫盲贴