Angular JS学习笔记

最新推荐文章于 2025-06-17 15:32:41 发布

原创最新推荐文章于 2025-06-17 15:32:41 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular JS 更改插件

js 学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用 AngularJS 构建动态 Web 应用程序，包括模块化应用的创建方式、指令的自定义实现及如何与现有 jQuery 插件进行整合等。通过具体实例展示了 AngularJS 的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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