源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AngularJS内置指令

  • 时间:2020-01-31 12:58 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径。 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生。 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西。 [b]内置指令[/b] 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突。 首先从一些常见的内置指令开始。 先列出一些关键的内置指令,顺便简单说说作用域的问题。 [b]ng-model[/b] 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确。 但先不要管咬文嚼字,用起来倒是易懂,例如:
[url={{myUrl}}] 其实这样href和ng-href看不出什么区别,所以我们可以试试这样: [b]ng-src [/b] 大同小异,即表达式生效前不要加载该资源。 例子(ps: 图片不错! ):
[u]复制代码[/u] 代码如下:
<img ng-src="{{imgSrc}}"/> .run(function($rootScope, $timeout) {     $timeout(function() {         $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';     }, 2000); })
[b]ng-class[/b] 用作用域中的对象动态改变类样式,例如:
[u]复制代码[/u] 代码如下:
<style>     .red {background-color: red;}     .blue {background-color: blue;} </style> <div ng-controller="CurTimeController">     <button ng-click="getCurrentSecond()" >Get Time!</button>     <p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p> </div> .controller('CurTimeController', function($scope) {     $scope.getCurrentSecond = function() {         $scope.x = new Date().getSeconds();     }; }) 
以上就是本文所述的全部内容了,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部