先看看以下的代码

<body ng-app="app" ng-controller="ctrl">
<dir myname="name"></dir>
<script src="js/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.name = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "=myname"
}
}
});
</script>
</body>

以上 ^ : 一开始会显示ABC,2秒后会显示XYZ。*外面可以同步内部

        app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
//$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "=myname"
}
}
});

以上^ : 开始显示ABC,3秒后显示XYZ。*内部可以同步外部

        app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});

以上^ : 开始显示name,3秒后显示name。*内部的符号“@”只能拿到string

<body ng-app="app" ng-controller="ctrl">
<dir myname="{{name}}"></dir>
<script src="js/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
</script>
</body>

以上 ^ : 一开始会显示ABC,2秒后会显示XYZ。*外面可以同步内部,同时注意div里是使用{{}}的表达式

        app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
//$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});

以上 ^ : 一开始会显示ABC,2秒后会显示XYZ。*内面可以同步外部,同时注意div里是使用{{}}的表达式

angular : direative : scope | 指令scope里的符号@,=的更多相关文章

  1. angular : direative : scope | 指令scope和transclude的关系

    今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...

  2. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  3. angular : direative :comunication 指令之间的通讯

    在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...

  4. angularJS1笔记-(14)-自定义指令(scope)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. AngularJS 全局scope与指令 scope通信

    在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...

  6. Angular的自定义指令以及实例

    本文章已收录于:  AngularJS知识库  分类: javascript(55)  http://www.cnblogs.com/xiaoxie53/p/5058198.html   前面的文章介 ...

  7. Angular内置指令(二)

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

  8. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  9. angular directive自定义指令

    先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...

随机推荐

  1. UVa 10427 - Naughty Sleepy Boys

    题目大意:从1开始往后写数字,构成一个如下的字符串 123456789101112... .求第n位的数字是多少. 找规律,按数字的位数可以构建一个类似杨辉三角的东西,求出第n位是哪个数的第几位即可. ...

  2. sae中thinkphp使用smarty

    因为最近在学thinkphp跟着做一个小商城. 没有使用thinkphp自带的think引擎,使用的是smarty引擎. 在sea中使用的时候出现了问题.已经是前几天的事了,问题图片没保存下来. 在网 ...

  3. phpcms推荐位数据库字段详解

  4. JavaScript 扯几句单线程相关

    JavaScript 扯几句单线程相关 众所周知,Javascript是单线程执行的,这也就是说:JavaScript在同一个时间上只能处理一件事.他不像C,Java等这些多 线程的,可以开不同的线程 ...

  5. HTML 脚本

    JavaScript 使 HTML 页面具有更强的动态和交互性. 在线实例 插入一段脚本如何将脚本插入 HTML 文档. 使用 <noscript> 标签如何应对不支持脚本或禁用脚本的浏览 ...

  6. Mysql密码忘记后如何重设密码

    1. 首先检查mysql服务是否启动,若已启动则先将其停止服务 2. 打开第一个cmd窗口,切换到mysql的bin目录,运行命令: mysqld --defaults-file="C:\P ...

  7. oracle取字符串长度的函数length()和hengthb()

    http://blog.itpub.net/161195/viewspace-613263/ lengthb(string)计算string所占的字节长度 :返回字符串的长度,单位是字节 length ...

  8. ASP.NET 页面之间传值的几种方式

    开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...

  9. loadrunner controller:实时查看VUser的运行情况

    1)         如下图,在Run标签页,点击"Vusers..."打开Vuser窗口: 2)         如下图选中一个Vuser点击按钮可以打开Run-Time Vie ...

  10. CI Weekly #12 | 微信小程序的自动化测试进阶

    岁末将至,站在年终冲刺的尾巴上,flow.ci 新增了个人和团队设置的功能: 上线团队功能,注册时默认创建一个与用户名一致的团队,可设置:团队名称.增减团队成员,后续会不断完善: 增加个人设置,可修改 ...