Angular JS API
http://docs.angularjs.org/api/
加载：
1、<html data-ng-app>
2、window.onload = function () {
angular.bootstrap(document, ['FnDirective']); //加载dom 和 module
};
例子：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World"><hr>
Hello {{yourname || 'World'}}!
</body>
</html>
===========================
<div class="time">
DateFormat:<input data-ng-model='format'> <br />
Time:<span fn-current-time='format'></span>
</div>
------------------------------------------
function Ctrl($scope) {
$scope.format = 'M/d/yy h:mm:ss a';
}
angular.module('FnDirective', []) //FnDirective 加载的模块
.directive('fnCurrentTime', function ($timeout, $filter) {
return function ($scope, $element, $attrs) {
var format = 'M/d/yy h:mm:ss a', timeoutId;
function updateTime() {
$element.text($filter('date')(new Date(), format));
}
$scope.$watch($attrs.fnCurrentTime, function (value) {
format = value;
updateTime();
});
function updateLater() {
timeoutId = $timeout(function () {
updateTime();
updateLater();
}, 1000);
}
$element.bind('$destroy', function () {
$timeout.cancel(timeoutId);
});
updateLater();
}
});
=========================
<add style="background-color: #ccc; width: 200px; height: 10px"></add>
-------------------------------
angular.module('FnDirective', []).directive('add', function () {
return {
restrict: 'E',
transclude: true,
scope: {},
replace: true,
template: '<div ng-click="info()">DDDDD</div>',
controller: function ($scope, $element, $attrs) {
$scope.info = function () {
console.log('sddddddddddddddddd');
};
}
}
});
=======================
<div ng-app='searchBox' ng-controller="Test">
<input i ng-model="val_Array" fn-autocomplete="" source="url" max-items="5"
min-length="2" start-with="true" ng-change="change();">
</div>
--------------------------------------
//在指令中主需要标注html attribute green-autocomplete=””引用.以及一些特殊option：
//
//Remote：(Boolean)是否为远程调用，true则source为url，false则为scope上的一个属性或者函数。
//Source：数据源，url、scope属性或者函数。
//min-length：开始显示下拉条的最小长度。
//position-my，position-at：jQuery下拉条显示样式
//start-with：（Boolean)是否为以前缀开始的帅选，默认false（包含）。
//max-items：显示最大下拉项数目。
var oldSuggest = jQuery.ui.autocomplete.prototype._suggest;
jQuery.ui.autocomplete.prototype._suggest = function (items) {
var itemsArray = items;
if (this.options.maxItems && this.options.maxItems > 0) {
itemsArray = items.slice(0, this.options.maxItems);
}
oldSuggest.call(this, itemsArray);
};
var autocomplete = function () {
var linkFun = function ($scope, $element, $attrs) {
var $input = jQuery($element);
var responseDataSource = function ($scope, source, pattern, response) {
var express = $scope[source];
var data = typeof(express) === "function" ? express(pattern, response) : express;
if (data) {
response(data);
}
};
var option = $attrs;
option.position = {
my: $attrs.positionMy,
at: $attrs.positionAt
};
var option = jQuery.extend({
position: {
my: "",
at: ""
},
close: function (event, ui) {
var express = $attrs["ngModel"] + "='" + $input.val() + "'";
$scope.$apply(express);
$scope.$eval($attrs["ngChange"]);
}
}, option);
if (!option.remote === true) {
option.dataSource = $attrs.source;
option.source = function (pattern, response) {
var option = $input.autocomplete("option");
var responseEx = function (data) {
var matches = jQuery.map(data, function (tag) {
var startWith = $attrs.startWith == true;
var index = tag.toUpperCase().indexOf(pattern.term.toUpperCase())
if ((startWith && index === 0) || (!startWith && index > -1)) {
return tag;
}
});
response(matches);
};
responseDataSource($scope, option.dataSource, pattern, responseEx);
};
} else {
option.source = function ajaxData(request, response) {
$.ajax({
url: _G_base_url + "/query?",
dataType: "json",
type: "post",
data: ' {name:request.term.toLocaleLowerCase()},
success: function (data) {
console.log(data);
response($.map(data.array, function (item) {
return {
label: item.cityname + ", " + item.countryfile,
value: item.cityfile
}
}));
}
}
);
}; //option.source; //remote url
}
$input.autocomplete(option);
};
return linkFun;
};
var appMoule = angular.module('SearchBox', []);
appMoule.directive("fnAutocomplete", autocomplete);
//test controller
var test = function ($scope) {
$scope.availableTags = [
"Java",
"JavaScript"
];
$scope.getsource = function (pattern, response) {
response($scope.availableTags);
};
$scope.change = function () {
console.log('change', $scope.cityFile);
};
};
appMoule.controller("Test", test);
$Scope？
参考：http://code.angularjs.org/1.0.2/docs/guide/scope
相关推荐
前提 Angular1.5 到 Angular4.0是重写的语言，Angular1简称...在Angular知识学习(一)中有讲述到表单的知识,不过那是最基础的演示,在之后的学习中又了解到模板驱动表单,所以考虑对之前的表单案例进行重构,完善表单
学习angular时候从网上博客转为PDF，方便阅读，适合初学者。
3.Angular4学习笔记2 Angular 2 TypeScript Live Template Angular 4.0 架构详解 Angular 4.0 内置指令全攻略 Angular 4.0从入门到实战 angular 如何操作 DOM angular4 cli命令大全 angular4官方教程 Angular4官方...
本文给大家分享angular.js学习笔记之自定义指令实例代码讲解，具体代码如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>AngularDirective</title>...
突然切换到JavaScript那真是难受的像北极熊同企鹅讲话，更何况后来嫌webstorm太卡而用起了没有提示的sublime（嗯，终于治好了多年顽疾的“从不记函数名症候群”）。经过了一段痛苦不堪的撞墙经历后，总算是开始习惯...
AngularJS 学习笔记（表单验证篇）的详细代码，内置了angular的1.2.25版所以比较大，eclipse工程，但是可以直接用浏览器打开查看效果的。
angular.js付费学习网站，按章节进行截屏
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
系统的前端学习笔记，包含html5，css，js以及各种框架，angular、vue等；另包含一些用js写的扑克游戏、音乐播放器；同时含有angular写的简单的购物车、vue实例等。
代码学习笔记 个人编程笔记文档网站，持续更新中... Java和JavaWeb :sparkles:收集的案例 :sparkles: :sparkles: JavaSE基础 :sparkles: :sparkles: JavaWeb :sparkles: 初步框架 :sparkles: 春天 :sparkles: :...
Angular2我自己还在摸索学习中，本文介绍了angular2+node.js express打包部署的实战，分享给大家，也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起。 1、angular2项目...
（2）新版本然而，因为在angularJs1.3版本中，为了让根节点不再被挂载很多亢余的内容，所以禁止直接在根节点上注册controller （3）setInt
本文不是Vue.js的教程，只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记。 1、vue和avalon一样，都不支持VM初始时不存在的属性 而在Angular里是可以支持的，因为angular采用脏检查...
今天主要跟大家详细讲解一下angularjs的三大模块： modal，controller，view。 首先跟大家说一下这三个模块之间的关系。 1.数据模型（modal）主要提供数据。它不会和视图（view）直接操作。 2.controller保存modal...
AngularJS是一个JavaScript框架。... ... AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架，它是由JavaScript语言编写的类库。...script src=”http://cdn.bootcss.com/angular.js/1.3.14/angul
1. 关于AngularJS 2. 关于本文档 3. 开始的例子 4. 依赖注入 5. 作用域 6. 数据绑定与模板 7. 模板 8. 模板中的过滤器 9. 锚
最近一段时间一直在看AngularJS，趁着一点时间总结一下。 ...先推荐几个教程 1. AngularJS入门教程 比较基础，是官方Tutorial的翻译。 2. 七步从AngularJS菜鸟到专家 也比较基础，制作了一个在线音乐播放网站。...
这些只是沙哑的笔记。 查看我的博客系列，了解一些写得更好的内容： 创建文件夹结构 /src , /src/client , /src/server /src/client将包含 gulp/bower 所需的工件 - HTML、图像、css、客户端 JS 和服务器端 JS...
标题画笔角度原型 alatiltbrush 学习如何处理three.js和angular 只是一个尝试的想法要好得多。 它取自笔记所有的用户界面都应该是有角度的必须很容易去除角以获得仅亚军所有功能都应该是 .prototype 吗？ 不是强制性...