Web前端（17）
angularjs（9）
在指令与控制器的通信中，我们一般会在指令内使用scope{@ = &}这三种关系，分别是单向绑定，双向绑定，函数。如：
name: '@myName',
ages: '=',
sex:'=sexs',
ceo:'=positions',
changeAge: '&changeMyAge',
changeName:'&changeMyName'
看去貌似没什么东西，但是想知道哪跟哪是对应关系，为了测这个我也是醉了。没办法，为了理解深刻自己测了好久。
这里的绑定关系应该是指‘中间键’关系。
&hello my-name="{{name}}" age="age" sexs='sex' positions='ceod' change-my-age="changeAge()" change-my-name="changeName()"&&/hello&
这行代码是html页面中该指令的代码。另外
$scope.name = "dreamapple";
$scope.age = 20;
$scope.positionName='android';
$scope.sex='mr.man';
$scope.ceod='dfjsdofj';
$scope.changeAge = function(){
$scope.age = 22;
$scope.sex='man';
$scope.changeName = function(){
$scope.name="老帅哥";
这上面的代码是控制器中的。
可以看出，在控制器中的一些属性名跟指令中的一些字段名是一样的有些是不同的，在html中的指令属性内可以看出指-控间的关系。
我还是贴出完整的指令内容吧↓
glb.directive('hello',function(){//指令与控制器间交互
var obj = {
restrict: "AE",
name: '@myName',
sex:'=sexs',
ceo:'=positions',
changeAge: '&changeMyAge',
changeName:'&changeMyName'
replace: true,
template: "&" +
"&下面部分是我们创建的指令生成的&" +
"我的名字是： ng-bind='name'&&/&" +
"我的年龄是： ng-bind='age'&&/&" +
"我的年龄是： ng-model='age'&&/&" +
"我的性别是： ng-bind='sex'&&/&" +
"我的职位是： ng-bind='ceo'&&/&" +
"我的性别是： type='text' ng-model='sex'&&/&" +
"我的职位是： ng-model='ceo'&&/&" +
"在这里修改名字： type='text' ng-model='name'&/&" +
" ng-click='changeAge()'&修改年龄&/&" +
" ng-click='changeName()'&修改名字&" +
还有完整的控制器中的内容↓
glb.controller('myCtrl',['$scope',function($scope){
$scope.name = "dreamapple";
$scope.age = 20;
$scope.positionName='android';
$scope.sex='mr.man';
$scope.ceod='dfjsdofj';
$scope.changeAge = function(){
$scope.age = 22;
$scope.sex='man';
$scope.changeName = function(){
$scope.name="老帅哥";
以及html中的相关内容↓
ng-controller="myCtrl"&
&我的名字是： ng-bind="name"&&
/&我的年龄是： ng-bind="age"&&
/&我的岗位是： ng-bind="positionName"&&
/&我的性别是： ng-bind="sex"&&
/&我的ceod是： ng-bind="ceod"&&
my-name="{{name}} age="age" sexs='sex' positions='ceod' change-my-age="changeAge()" change-my-name="changeName()"&&
从指令中的scope内的属性跟html页面中的hello指令的属性对比来看有什么发现没，首先，可以看出@相关的写法都是方法指令的值在页面指令中当属性来写，并且绑定的内容是方法指令中的属性，如果是绑定控制器中属性名的话，页面结果显示还是绑定方法指令跟控制器无关。 显示结果↓
总结出：@单向绑定不论页面指令绑定值是方法指令的还是控制器的还是一样的属性名，其结果都是只跟自身指令有关与控制器无关（如果绑定的属性名一样，则初始化时指令的值与控制器相同）。
另外经过测试，如果是@单向绑定的话，在页面hello指令内可以不写，系统默认会加上去。不过这样的话，初始化的值就不是对应在控制器中同名的属性值了，而默认初始值是空的。
如果是=双向绑定的话，在页面hello指令中必须要写，不然会报错的。另外说明下，如果在方法指令的scope中属性的值只有@/=则默认是‘@/= 对应的属性名’。
如果页面中指令属性的值是方法指令属性（跟控制器中的属性名字相同，如上图sex属性）则在指令中改变值，控制器中的属性名字相同的值也会跟着改变(初始化时指令的值是引用控制器中对应属性名的值，并且指令中更改值，控制器中也会跟着改变)。
同理取反，结果在下面。
如果页面中指令属性的值是跟控制器中的属性名字相同，但跟方法指令中的属性名不同，则只双向绑定方法指令中的内容，已与控制器无关了（指令初始化内容为空）。如图所示
页面结果显示↓
总结得出：=双向绑定，如果页面指令中绑定的值是方法指令跟控制器中属性一样，则指令中改变，控制器值也改变（初始化时方法指令的值是引用控制器中对应属性名相同的值）。否则，不论页面指令中绑定的值是方法指令中的还是控制器中的（两个属性名不同），显示结果都是只改变方法指令生成的内容范围。对控制器无影响（初始化时方法指令的值为空）。
最后是函数的&的使用，该函数体是写在控制器中的。对控制器中的属性做出一些事件更改。在方法指令模板中要有该函数的事件，比如ng-click=’changeAge()’事件，并且在页面指令中要写出改函数方法。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：16589次
排名：千里之外
原创：44篇
(1)(4)(8)(3)(1)(1)(4)(3)(4)(3)(2)(4)(2)(9)(3)指令与控制器交互，指令与指令交互 - 博客频道 - CSDN.NET
分类：angularjs
慕课网《AngularJS实战》–指令3笔记，点击打开链接
一、不同指令对应不同控制器方法（指令的复用）
Directive&Controller.js
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
myModule.controller('MyCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("加载数据中...22222");
myModule.directive("loader", function() {
restrict:"AE",
link:function(scope,element,attrs){
element.bind('mouseenter', function(event) {
scope.$apply(attrs.howtoload);
Directive&Controller.html
&!doctype html&
ng-app="MyModule"&
charset="utf-8"&
ng-controller="MyCtrl"&
howToLoad="loadData()"&滑动加载&
ng-controller="MyCtrl2"&
howToLoad="loadData2()"&滑动加载&
src="framework/angular-1.3.0.14/angular.js"&&
src="Directive&Controller.js"&&
二、指令间的交互
以下示例：四种能力越来越强的超人
Directive&Directive.js
var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
scope: {},
restrict: 'AE',
controller: function($scope) {
$scope.abilities = [];
this.addStrength = function() {
$scope.abilities.push("strength");
this.addSpeed = function() {
$scope.abilities.push("speed");
this.addLight = function() {
$scope.abilities.push("light");
this.addFart = function() {
$scope.abilities.push("fart");
link: function(scope, element, attrs) {
element.addClass('btn btn-primary');
element.bind("mouseenter", function() {
console.log(scope.abilities);
myModule.directive("strength", function() {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addStrength();
myModule.directive("speed", function() {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
myModule.directive("light", function() {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addLight();
myModule.directive('fart',
function(){
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addFart();
Directive&Directive.html
controller：中写你想要暴露给外部的方法
link：绑定事件、数据
&!doctype html&
ng-app="MyModule"&
charset="utf-8"&
rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"&
src="framework/angular-1.3.0.14/angular.js"&&
src="Directive&Directive.js"&&
class="row"&
class="col-md-3"&
strength&动感超人---力量&
class="row"&
class="col-md-3"&
strength speed&动感超人2---力量+敏捷&
class="row"&
class="col-md-3"&
strength speed light&动感超人3---力量+敏捷+发光&
class="row"&
class="col-md-4"&
strength speed light fart&动感超人3---力量+敏捷+发光+放屁&
排名：千里之外
（8）（12）（4）（5）（3）（1）（2）（0）（1）（5）（2）（1）（35）（1）（11）（30）（8）（9）（1）（1）AngularJS控制器详解及示例代码
字体：[ ] 类型：转载 时间：
本文主要介绍AngularJS控制器,这里整理了控制器的相关资料和提供示例代码及实例效果图，有需要的小伙伴可以参考下
AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。
&div ng-app="" ng-controller="studentController"&
在这里，我们已经声明采用ng-controller指令的控制器studentController。作为下一步，我们将定义studentController如下
function studentController($scope) {
$scope.student = {
firstName: "yiibai",
lastName: "com",
fullName: function() {
var studentO
studentObject = $scope.
return studentObject.firstName + " " + studentObject.lastN
studentController 定义 $scope 作为JavaScript对象参数。
$scope 表示应用程序，使用studentController对象。
$scope.student 是studentController对象的属性。
firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
fullName 是$scope.student对象的函数，它的任务是返回合并的名称。
在fullName函数中，我们现在要学生对象返回组合的名字。
作为一个说明，还可以定义控制器对象在单独的JS文件，并把有关文件中的HTML页面。
现在可以使用ng-model或使用表达式如下使用studentController学生的属性。
Enter first name: &input type="text" ng-model="student.firstName"&&br&
Enter last name: &input type="text" ng-model="student.lastName"&&br&
You are entering: {{student.fullName()}}
现在有 student.firstName 和 student.lastname 两个输入框。
现在有 student.fullName()方法添加到HTML。
现在，只要输入first name和lastname输入框中输入什么，可以看到两个名称自动更新。
下面的例子将展示使用控制器。
testAngularJS.html 文件内容如下：
&title&Angular JS Controller&/title&
&h2&AngularJS Sample Application&/h2&
&div ng-app="" ng-controller="studentController"&
Enter first name: &input type="text" ng-model="student.firstName"&&br&&br&
Enter last name: &input type="text" ng-model="student.lastName"&&br&
You are entering: {{student.fullName()}}
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentO
studentObject = $scope.
return studentObject.firstName + " " + studentObject.lastN
&script src="/ajax/libs/angularjs/1.2.15/angular.min.js"&&/script&
在Web浏览器打开textAngularJS.html，看到以下结果：
以上就是AngularJS控制器的资料整理，后续继续整理相关知识，谢谢大家对本站的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具angularjs 中 控制器，服务，指令3者的区别是什么啊，晕晕的_百度知道AngularJS内置指令
投稿：hebedich
字体：[ ] 类型：转载 时间：
这篇文章主要详细介绍了AngularJS内置指令的使用方法，非常详细，常用的一些指令操作都做了总结，有需要的小伙伴参考下
指令，我将其理解为AngularJS操作HTML element的一种途径。
由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点，所以指令早已不陌生。
这篇日志简单记录了一些内置指令，先使用起来，再谈一些有趣的东西。
所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。
首先从一些常见的内置指令开始。
先列出一些关键的内置指令，顺便简单说说作用域的问题。
将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。
但先不要管咬文嚼字，用起来倒是易懂，例如:
&input type="text" ng-model="someModel.someProperty" /&&br&
{{someModel.someProperty}}
该指令被调用时会初始化内部作用域。
这个指令一般会出现在比较小的应用中，比如给个demo什么的...
&div ng-init="job='fighter'"&
&&& I'm a/an {{job}}
除了ng-init，我们还有更多更好的选择。
每一次用AngularJS都离不开这个指令，顺便说下$rootScope。
声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在&html&你懂的。
也就是说根下的作用域都可以访问它。
但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。
下面是一个例子:
&html ng-app="myApp"&
&&& {{ someProperty }}
var myApp = angular.module('myApp', [])
.run(function($rootScope) {
&&& $rootScope.someProperty = 'hello computer';
ng-controller
我们用这个指令在一个DOM元素上装上controller。
一个控制器? 确实，从字面意思上这样理解倒是不错，那我们为什么需要控制器?
记得AngularJS 1.2.x时还可以这样定义controller来着...
function ohMyController($scope) {
AngularJS 1.3.x中禁止了这种方式，因为这种方式会让controller满天飞，分不清层次，所有东西都挂在$rootScope上...
ng-controller必须有一个表达式作为参数，另外通过$scope来继承上级$scope的方法和属性什么的，$rootScope也包括在内。
下面只是一个简单的例子，ancestor无法访问child的作用域。
&div ng-controller="AncestorController"&
&&& {{ ancestorName }}
&&& {{ childName }}
&&& &div ng-controller="ChildController"&
&&&&&&& {{ ancestorName }}
&&&&&&& {{ childName }}
&&& &/div&
var myApp = angular.module('myApp', [])
.controller('ChildController', function($scope) {
&&& $scope.childName = 'child';
.controller('AncestorController', function($scope) {
&&& $scope.ancestorName = 'ancestor';
作用域的问题远不止如此，暂且搁下，继续看看其他内置指令。
起初不明白为什么会有个表单指令，&form&标签感觉也够用啊。
以表单验证为例，在上一篇中有这么一段代码:
&input type="submit" ng-disabled="mainForm.$invalid" /&
也就是表单的状态为$invalid时禁用提交按钮。
如果场景再稍微复杂一点点，比如一个父表单中有多个子表单，子表单中有3个验证通过时父表单便可以提交。
但是，&form&是不可以嵌套的。
考虑到这种场景，我们便使用ng-form指令来解决这一问题。
&form name="mainForm" novalidate&
&&& &div ng-form="form1"&
&&&&&&& 姓名:&input type="text" ng-required="true" ng-model="name"/&&br&
&&&&&&& 证件号码:&input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/&
&&& &/div&
&&& &div ng-form="form2"&
&&&&&&& 监护人姓名:&input type="text" ng-required="true" ng-model="gname"/&&br&
&&&&&&& 监护人证件号码:&input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/&
&&& &/div&
&&& &button ng-disabled="form1.$invalid && form2.$invalid"&submit all&/button&
ng-disabled
像这种只要出现则生效的属性，我们可以在AngularJS中通过表达式返回值true/false令其生效。
禁用表单输入字段。
&textarea ng-disabled="1+1==2"&1+1=?&/textarea&
ng-readonly
通过表达式返回值true/false将表单输入字段设为只读。
弄个例子，3秒后变成只读.
&input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/&
.run(function($rootScope,$timeout){
&&& $rootScope.stopTheWorld=
&&& $timeout(function(){
&&&&&&& $rootScope.stopTheWorld =
&&& },3000)
ng-checked
这个是给&input type="checkbox" /&用的，比如...
&input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty"&
ng-selected
给&select&里面的&option&用的，例子:
&&& &input type="checkbox" ng-model="isFullStack"&
&&& I'm Full Stack Engineer
&&& &option&Front-End&/option&
&&& &option&Back-End&/option&
&&& &option ng-selected="isFullStack"&Full Stack !!!&/option&
ng-show/ng-hide
根据表达式显示/隐藏HTML元素，注意是隐藏，不是从DOM移除，例如:
&div ng-show="1+1 == 2"&
&div ng-hide="1+1 == 3"&
&&& you can't see me.
不是HTML那套onXXX之类的，而是ng-XXX。
结合ng-model使用，以ng-change为例:
&input type="text" ng-model="calc.arg"& ng-change="calc.result = calc.arg*2" /&
&&& &code&{{ calc.result }}&/code&
或者比如ng-options
其实这个也是一个指令，也许觉得和ng-bind差不多，但页面渲染略慢时可能会被看到。
另外，{{}}的performance远不如ng-bind，只是用起来很方便。
ng-bind的行为和{{}}差不多，只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content)，也就是未渲染导致的闪烁。
ng-cloak也可以为我们解决FOUC。 ng-cloak会将内部元素隐藏，直到路由调用对应的页面。
如果ng-if中的表达式为false，则对应的元素整个会从DOM中移除而非隐藏，但审查元素时你可以看到表达式变成注释了。
如果相进行隐藏，可以使用ng-hide。
&div ng-if="1+1===3"&
&&& 无法审查到该元素
&div ng-hide="1+1==2"&
&&& 可审查
单独使用没什么意思，下面是例子:
&div ng-switch on="1+1"&
&&& &p ng-switch-default&0&/p&
&&& &p ng-switch-when="1"&1&/p&
&&& &p ng-switch-when="2"&2&/p&
&&& &p ng-switch-when="3"&3&/p&
不明白为毛不叫iterate，总之是遍历集合，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性，如下:
不用特地解释，这些都很容易看出来是干什么的，下面是一个例子:
&&& &li ng-repeat="char in
&&& [{'alphabet': 'K'},
&&& {'alphabet': 'A'},
&&& {'alphabet': 'V'},
&&& {'alphabet': 'L'},
&&& {'alphabet': 'E'},
&&& {'alphabet': 'Z'}] " ng-show="$even"&{{char.alphabet}}&/li&
起初我在一个文本域中弄了个ng-model，然后像这样&a href="{{myUrl}}"&在href里面写了进去。
其实这样href和ng-href看不出什么区别，所以我们可以试试这样:
&ul ng-init="myHref=''"&
&&& &li&&a ng-href="{{ myHref }}"&{{linkText}}&/a&&/li&
&&& &li&&a href="{{ myHref }}"&可以点击，但不一定是正确的地址&/a&&/li&
.run(function($rootScope, $timeout) {
&&& $rootScope.linkText = '尚未加载，您无法点击';
&&& $timeout(function() {
&&&&&&& $rootScope.linkText = '请点击'
&&&&&&& $rootScope.myHref = '';
&&& }, 2000);
大同小异，即表达式生效前不要加载该资源。
例子(ps: 图片不错! ):
&img ng-src="{{imgSrc}}"/&
.run(function($rootScope, $timeout) {
&&& $timeout(function() {
&&&&&&& $rootScope.imgSrc = '/images/daftpunktocat-guy.gif';
&&& }, 2000);
用作用域中的对象动态改变类样式，例如:
&&& .red {background-color:}
&&& .blue {background-color:}
&div ng-controller="CurTimeController"&
&&& &button ng-click="getCurrentSecond()" &Get Time!&/button&
&&& &p ng-class="{red: x%2==0,blue: x%2!=0}" &Number is: {{ x }}&/p&
.controller('CurTimeController', function($scope) {
&&& $scope.getCurrentSecond = function() {
&&&&&&& $scope.x = new Date().getSeconds();
以上就是本文所述的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}