标签归档:AngularJS

首页 » Posts tagged 'AngularJS'

w3cmm

AngularJS component 通信

angular.module(‘hellosolarsystem’).component(‘hello’, { template: ‘<h3><input ng-model=”name”>{{name}}{{$ctrl.greeting}} solar sytem!</h3>’ + ‘<button ng-click=”$ctrl.toggleGreeting()”>toggle greeting</button>’, controller: function($scope) { this.greeting = ‘hello’; $scope.name = “111”; this.toggleGreeting = … 继续阅读

目录 记事本 | |
w3cmm

AngularJS如何更新bindings

Angular让我们将我们的界面的部分绑定到JavaScript代码中的数据,但是如何知道数据何时更新,页面需要更新? 一种策略是使用特殊对象,其中通过方法设置数据,而不是属性分配。然后可以注意到更改,可以更新页面。这有缺点,我们必须extend一些特殊的对象。另外,为了分配,我们必须使用更详细的obj.set(‘key’,’value’)形式,而不是obj.key =’value’。像EmberJS和KnockoutJS这样的框架使用这个策略。 Angular采用不同的方法:允许任何值作为绑定目标。然后在任何JavaScript代码return的末尾,检查该值是否已更改。这可能似乎在第一次失效,但有一些聪明的策略来降低性能耗损。最大的好处是我们可以使用普通对象并更新我们 … 继续阅读

目录 记事本 | |
w3cmm

我眼中的 AngularJS

从源码入手 如同其他常见脚本框架一样,angular的核心代码包裹在一个自调用的匿名函数里边 (function(window, document, undefined) {     //…     var angular = window.angular || (window.angular = {}); })(window, document); 在自调用匿名函数内部angular是一个对象,通过publishExternalAPI给angular对象赋值方法,angular.module通过setupModuleLoader赋值。 function publishExternalAPI(angular) {   extend(angular, {     ‘bo … 继续阅读

目录 记事本 | |
w3cmm

用AngularJS directive为DOM元素绑定enter事件

例如在表单提交的场景,用户敲击回车键实现登录操作: <!DOCTYPE html> <html ng-app=”app”> <head>     <title>angular</title>     <meta charset=”utf-8″>     <script src=”angular.js”></script> </head> <body>     <div ng-controller=”test”>         <input type=”text” my-enter=”doSomething()”>       & … 继续阅读

目录 记事本 | |
w3cmm

在AngularJS expression中插入html

有时候我们需要在angular表达式中写入html结构并被浏览器解析,而不是当作字符串来处理,如下所示: <!DOCTYPE html> <html ng-app=”app”> <head>     <title>angular</title>     <meta charset=”utf-8″>     <script src=”angular.js”></script> </head> <body>     <div ng-controller=”test”>         <p>{{data}}</p>     … 继续阅读

目录 记事本 | |
w3cmm

AngularJS controller通信

父控制器向子控制器通信 <!DOCTYPE html> <html> <head>     <title>Broadcasting</title>     <script src=”angular.js”></script> </head> <body ng-app=”app”>     <div ng-controller=”parentCtrl” style=”border:2px solid #E75D5C; padding:5px;”>         <h1>Parent Controller</h1>         … 继续阅读

目录 记事本 | |
w3cmm

AngularJS中创建自定义指令(directive)

angular-directive

在angular中,angular.module返回一个module对象,module对象拥有directive方法,directive方法可以用来创建自定义指令,自定义指令可以使html标签语义化。 先看一个实例: <html>    <head>       <meta charset=”utf-8″>       <title>自定义指令</title>       <script src=”angular.js”></script>    </head>    <body ng-app=’app’>       <hello></hello … 继续阅读

目录 记事本 | |
w3cmm

jQuery、jqLite 与 angular.element

angular.element用法 angular.element(element); angular.element在已经加载jQuery的情况下使用jQuery方法(1.0.1中直接将jQuery对象赋值给angular.element),否则使用JQLite方法。 当angular.element使用JQLite方法时,参数element不能是tag name 和 CSS selector,如果需要标签名查找可以使用angular.element(document).find(…)或$document.find(),或者使用标准的DOM APIs,例如document.querySelectorAll()。 //当加载jQuery时 angular.elemen … 继续阅读

目录 记事本 | |
第 1 页,共 1 页1