`

Angular JS学习笔记

Angular JS 更改插件 
阅读更多 
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

 

分享到：
| 探索devise插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    最新版Angular V4 学习笔记

    ### Angular V4 学习笔记知识点详解 #### 组件模板设置 在Angular中，组件是构建用户界面的基本单元。为了使这些组件能够显示相应的视图，我们需要定义它们的模板。 - **Template**: 它用于直接定义组件的HTML结构...

    angular学习笔记

    ### Angular学习笔记知识点详解 #### 一、AngularJS指令概览 AngularJS 是一款非常强大的前端框架，它通过一系列的指令让HTML变得更为生动且功能丰富。这些指令以`ng-`开头，允许开发者轻松地扩展HTML的功能。下面...

    Angular 权威教程笔记

    笔记内容详实，覆盖了Angular的各个方面，对于想要深入学习和掌握Angular开发的开发者来说，是不可或缺的学习资料。 Angular的核心部分是组件，它是整个应用的基石。Angular中的组件是由带有@Component装饰器的类...

    AngularJS 学习笔记.pdf

    总而言之，这份AngularJS的学习笔记为初学者提供了一个由浅入深、涵盖AngularJS基础知识和核心概念的全面指南。通过对这份笔记的学习，初学者可以逐步掌握AngularJS的使用，从而有效地进行前端开发。

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据，数据类型分为基本类型（如字符串...

    JavaScript 学习笔记集和代码库

    这个“JavaScript学习笔记集和代码库”涵盖了该语言的基础知识、进阶技巧以及实用示例，对于想要深入理解和掌握JavaScript的初学者或有经验的开发者来说，都是一个宝贵的资源。 首先，让我们来讨论JavaScript的基础...

    最全面的Angular4.0教程合集_极品.zip

    3.Angular4学习笔记2 Angular 2 TypeScript Live Template Angular 4.0 架构详解 Angular 4.0 内置指令全攻略 Angular 4.0从入门到实战 angular 如何操作 DOM angular4 cli命令大全 angular4官方教程 Angular4官方...

    javaScript学习笔记.rar

    这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录，对于初学者或者想要深入理解JavaScript的人来说，是一份宝贵的资源。 JavaScript与Java虽然名字相似，但两者实际上是不同...

    JavaScript 入门 新手学习笔记

    这篇"JavaScript入门新手学习笔记"提供了全面的学习资源，适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点： 1. **基础语法**：JS的基础包括变量（var、let、const）、数据类型（如字符串、数字、...

    JS AngularJS 学习笔记

    **AngularJS 框架详解** AngularJS 是一个强大的JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（模型-视图-控制器...通过深入学习和实践，你可以有效地利用AngularJS构建高效、可维护的Web应用程序。

    JavaScript基础学习笔记

    JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...

    Angular4学习笔记之新建项目的方法

    在Angular4的学习过程中，创建一个新的项目是初学者的首要任务。这篇文章将详细讲解如何通过Angular CLI来完成这一过程。Angular CLI（命令行接口）是一个强大的工具，它简化了项目的搭建和开发流程。以下是你需要...

    Angular.js自定义指令学习笔记实例

    本文给大家分享angular.js学习笔记之自定义指令实例代码讲解，具体代码如下所示： &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;AngularDirective&lt;/title&gt...

    angular-tutorial：一些角度教程-《 Angular学习笔记》

    《Angular学习笔记》是针对Angular框架的一份详细教程，它涵盖了从基础到进阶的各种概念和技术。Angular是一款由Google维护的开源JavaScript框架，用于构建单页应用（SPA）。本教程旨在帮助开发者理解并掌握Angular...

    整理的前端 学习笔记资料

    通常，前端学习笔记会包括HTML、CSS、JavaScript这三个基础核心技术，以及相关的框架和库，如React、Vue、Angular等。还可能涉及前端工程化，如模块化、构建工具（Webpack、Gulp）、状态管理（Redux、Vuex）以及响应...

Magicbox
Global site tag (gtag.js) - Google Analytics