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-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

当这个css规则由浏览器加载,所有html元素(包括孩子)标有ngCloak指令是隐藏的。当angular在编译的时候约到了这个指令,

它删除ngCloak元素属性,使得编译元素可见。

为达到最佳的效果 angular脚本必须加载html文档的头部部分;或者上面的css规则必须包含在应用程序的外部样式表。

ngController

ngController会添加一个 controller类到view里面,这是angular支持模型-视图-控制器设计模式背后的原则的一个关键。

angular的MVC组件:

Model — 模型是一个范围的属性;scope是附加到DOM属性通过绑定访问范围。

View — 与数据绑定模板(HTML)呈现到视图。

Controller — ngController指令指定一个控制器类;这个类包含应用程序以及使用的函数与值的范围。、

Directive Info

这个指令创建新的范围。 这个指令执行优先级500。

Usage

as attribute:

<ANY
  ng-controller="">
...
</ANY>
 

Arguments

Param Type Details
ngController expression
$controllerProvider或者表达式注册构造函数名字,对当前范围评估一个构造函数。

通过制定ng-controller="as propertyName",控制力实例可以发布到一个范围的属性。

 

如果当前$controllerProvider配置为使用全局变量(via $controllerProvider.allowGlobals()),就可以以全局名去访问构造函数(不被推荐)

这是一个简单的表单编辑用户的联系信息。添加、删除、清算,问候在控制器中声明的方法(参见源选项卡)。这些方法可以很容易地从angular标记。任何更改会自动反映在视图的数据而不需要手动更新。

两个不同的声明风格包括如下:

一种方法直接控制属性使用 this: ng-controller="SettingsController1 as settings"

一种方法在控制器里注入$scope:ng-controller="SettingsController2"

第二个选择是更加普遍在Angular社区里。一般用于样板和指南,然而,优点直接绑定属性控制器,避免范围。

当有多个控制器控制同名的元素的时候,使用controller as 使它使得你的模板更加明显。

如果您正在编写你的控制器类更容易获得属性和方法。这将出现在scope,控制器内部的代码。

因为总是有 . 在绑定,您不必担心原型继承屏蔽原语。

时间: 2024-08-10 18:24:53

Angular 下的 directive (part 2)的相关文章

Angular 下的 directive

directive  指令 Directive components  指令部分 使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: <body> or <html>标签.   AngularJS应用程序可以自动引导HTML文档.首先在文档中找到ngApp将被引导为应用程序的根元素. 在HTML文档中运行多个应用程序您必须手动引导他们使用angular.bootstrap来代替. AngularJS应用程序不能相互嵌套. 您可

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