AngularJS实现自定义指令及指令配置项的方法

本文实例讲述了AngularJS实现自定义指令及指令配置项的方法。分享给大家供大家参考,具体如下:

AngularJS自定义指令有两种写法:

//第一种
angular.module('MyApp',[])
.directive('zl1',zl1)
.controller('con1',['$scope',func1]);
function zl1(){
  var directive={
    restrict:'AEC',
   template:'this is the it-first directive',
  };
  return directive;
};
function func1($scope){
  $scope.name="alice";
}
//第二种
angular.module('myApp',[]).directive('zl1',[ function(){
 return {
  restrict:'AE',
  template:'thirective',
  link:function($scope,elm,attr,controller){
   console.log("这是link");
  },
  controller:function($scope,$element,$attrs){
   console.log("这是con");
  }
 };
}]).controller('Con1',['$scope',function($scope){
 $scope.name="aliceqqq";
}]);

指令配置项

angular.module('myApp', []).directive('first', [ function(){
  return {
    // scope: false, // 默认值,共享父级作用域
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'first name:{{name}}',
  };
}]).directive('second', [ function(){
  return {
    scope: true, // 继承父级作用域并创建指令自己的作用域
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    //当修改这里的name时,second会在自己的作用域中新建一个name变量,与父级作用域中的
    // name相对独立,所以再修改父级中的name对second中的name就不会有影响了
    template: 'second name:{{name}}',
  };
}]).directive('third', [ function(){
  return {
    scope: {}, // 创建指令自己的独立作用域,与父级毫无关系
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'third name:{{name}}',
  };
}])
.controller('DirectiveController', ['$scope', function($scope){
  $scope.name="mike";
}]);

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

(0)

相关推荐

  • AngularJS 自定义指令详解及示例代码

    自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element directives - 指令遇到时激活一个匹配的元素. Attribute - - 指令遇到时激活一个匹配的属性. C

  • AngularJS优雅的自定义指令

    学习要点  •为什么使用指令  •创建自定义指令 •使用jqLite工作 一.为什么使用自定义指令 NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性. 二.自定义指令 接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head

  • AngularJS使用自定义指令替代ng-repeat的方法

    前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15

  • AngularJS自定义指令实现面包屑功能完整实例

    本文实例讲述了AngularJS自定义指令实现面包屑功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"

  • AngularJS自定义指令详解(有分页插件代码)

    前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • AngularJS自定义指令之复制指令实现方法

    本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • AngularJS 自定义指令详解及实例代码

    AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d

  • 深入讲解AngularJS中的自定义指令的使用

    AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素指令 属性指令 CSS class 指令 注释指令 在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子:   元素指令 在html中写

  • 详解angularJS自定义指令间的相互交互

    AngularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用.默认值为false不能使用嵌套,true为可以使用嵌套.在哪个标签上使用ng-transclude就在哪个标签内进行嵌套. 代码示例:(将hello.hi标签进行替换同时span标签嵌套div内) <script type="text/javascript"> var m = angular.module('myApp',[]); m.directive('

随机推荐