首页 > 代码库 > Angular 下的 directive （part 2）

Angular 下的 directive （part 2）

2024-07-30 14:32:46   228人阅读

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

ParamTypeDetails
ngControllerexpression

$controllerProvider或者表达式注册构造函数名字，对当前范围评估一个构造函数。

 

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

 

 

如果当前$controllerProvider配置为使用全局变量(via $controllerProvider.allowGlobals()),就可以以全局名去访问构造函数（不被推荐）
 
这是一个简单的表单编辑用户的联系信息。添加、删除、清算,问候在控制器中声明的方法(参见源选项卡)。这些方法可以很容易地从angular标记。任何更改会自动反映在视图的数据而不需要手动更新。
 
两个不同的声明风格包括如下:
 
一种方法直接控制属性使用 this: ng-controller="SettingsController1 as settings"
一种方法在控制器里注入$scope：ng-controller="SettingsController2"
 
第二个选择是更加普遍在Angular社区里。一般用于样板和指南，然而，优点直接绑定属性控制器,避免范围。
 
当有多个控制器控制同名的元素的时候，使用controller as 使它使得你的模板更加明显。
 
如果您正在编写你的控制器类更容易获得属性和方法。这将出现在scope,控制器内部的代码。
 
因为总是有 . 在绑定,您不必担心原型继承屏蔽原语。

Angular 下的 directive （part 2）


联系
我们