Angular 下的 directive

directive  指令

Directive components  指令部分

使用指令自动引导一个AngularJS应用。ngApp指令指定应用程序的根元素,通常是放在页面的根元素如:

<body> or <html>标签。

 

AngularJS应用程序可以自动引导HTML文档、首先在文档中找到ngApp将被引导为应用程序的根元素。

在HTML文档中运行多个应用程序您必须手动引导他们使用angular.bootstrap来代替。

AngularJS应用程序不能相互嵌套。

您可以指定一个AngularJS模块作为根模块用于应用程序。应用程序被引导时这个模块将加载到注入器以及

应用程序需要的代码或者依赖于其他模块包含的代码angular.module中有跟多的信息

 

下面的这个例子中,如果ngApp指令没有放在html文档不会被编译,AppController将不能够被实例化为

{{ a+b }} 等于 3

 

所以要这么写

HTML:

<body ng-app="ngAppDemo">

<div ng-controller="ngAppDemoController">

I can add: {{a}} + {{b}} = {{ a+b }}    // i can add: 1 + 2 = 3;

</div>

<script type="text/javascript">

angular.module(‘ngAppDemo‘, []).controller(‘ngAppDemoController‘, function($scope) {

$scope.a = 1;

$scope.b = 2;

});

</script>

</body>

Javascript:

angular.module(‘ngAppDemo‘, []).controller(‘ngAppDemoController‘, function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});
时间: 2024-10-26 10:01:10

Angular 下的 directive的相关文章

Angular 下的 directive (part 2)

ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现.   该指令可以应用于<body>元素,但首选使用多个ngCloak指令应用于页面的一小部分,允许进步呈现的浏览器视图. ngCloak工作与下面的css规则嵌入到角的合作.js和angular.min.js.请添加angular-csp CSP的模式.css,html文件(见ngCsp). [ng\:cloak], [ng-cloak], [data-ng-clo

angular下H5上传图片(可多张上传)

最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp').directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $time

angular学习之directive

Angular对directive的定义是一段代码片段,你 可以用它来操作DOM 使用directive可以实现事件的绑定module.directive( "addBookButton", [ 'Book', function( Book ) { return { restrict: "A", link: function( scope, element, attrs ) { element.bind( "click", function()

angular 自定义指令 directive transclude 理解

项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象Demo: <!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>Angularjs</

常见开发需求之angular下拉加载更多

需求   移动端使用angular实现下拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,bug太多,后来改分页了,我们产品说什么都让做,么办法,只能自己动手写一下,我的思路就是当页面第一次加载的时候我们先固定请求一部分数据进行显示,之后使用js探测垂直滚动条的滚动距离,当页面即将触底的时候发送第n+1请求,为防止在请求过程中重复请求加入了截流判断,其次在请求过程中页面最底部出现加载等待动画.如图所示 指令实现 // isBottom为防止

Angular之指令Directive系列

项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q

Angular JS (指令 directive)

一,指令的创建 /*--Js code--*/var app = angular.module("superhero",[]);app.directive("superman",function(){return { restrict: "E", template: "<div> Here I am to save the day </div>"}}) /*--HTML code--*/<div

Angular下 ui-select插件Tagging功能的数据保存

插件参考:https://github.com/angular-ui/ui-select 问题: 插件的值为数组形式,可正常保存至MS SQL数据库中,但反序列化时出错. 解决方法: (1)插件的ng-model由原来的modelArticle.SeoKeywords变为modelArticle.$$SeoKeywords. (2)数组转化成字符串: $scope.modelArticle.SeoKeywords = $scope.modelArticle.$$SeoKeywords.join(

angular下拉框赋值问题

描述:在我们的项目中,会用到下拉框选项,比如后台系统,会有新增修改删除等操作: 当新增时,会输入一些内容,也会利用到下拉框,保存之后数据发送给后台: 当编辑时,需要把上次的内容带到本次中,下拉框需要展示出新增保存时所选择的那个,具体做法如下: $scope.roleNameLIst= [ {id:"sys009",name:"技术部管理员",age:18,address:"北京市昌平区"}, {id:"sys008",name