[AngularJS] Build Your Own ng-controller Directive
/**
* Created by Answer1215 on 12/21/2014.
*/
angular.module('app', [])
.controller('FirstCtrl' , function(){
var vm = this;
vm.message = "I am the first controller";
}) .controller('SecondCtrl', function() {
var vm = this;
vm.message = "I am the second controller";
}) .directive('customerController', function() {
return{ scope: true, //create a new scope
controller: '@', //assing the directive name to this controller
priority: 500,
restrict: 'A'
}
})
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body> <div customer-controller="FirstCtrl as first" class="well">{{first.message}}</div>
<div customer-controller="SecondCtrl as second" class="well">{{second.message}}</div> <script src="bower_components/angular/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
In angular.js src:
var ngControllerDirective = [function() {
return {
restrict: 'A',
scope: true,
controller: '@',
priority: 500
};
}];
this.directive = function registerDirective(name, directiveFactory) {
assertNotHasOwnProperty(name, 'directive');
if (isString(name)) {
assertArg(directiveFactory, 'directiveFactory');
if (!hasDirectives.hasOwnProperty(name)) {
hasDirectives[name] = [];
$provide.factory(name + Suffix, ['$injector', '$exceptionHandler',
function($injector, $exceptionHandler) {
var directives = [];
forEach(hasDirectives[name], function(directiveFactory, index) {
try {
var directive = $injector.invoke(directiveFactory);
if (isFunction(directive)) {
directive = { compile: valueFn(directive) };
} else if (!directive.compile && directive.link) {
directive.compile = valueFn(directive.link);
}
directive.priority = directive.priority || 0;
directive.index = index;
directive.name = directive.name || name;
directive.require = directive.require || (directive.controller && directive.name);
directive.restrict = directive.restrict || 'EA';
if (isObject(directive.scope)) {
directive.$$isolateBindings = parseIsolateBindings(directive.scope, directive.name);
}
directives.push(directive);
} catch (e) {
$exceptionHandler(e);
}
});
return directives;
}]);
}
hasDirectives[name].push(directiveFactory);
} else {
forEach(name, reverseParams(registerDirective));
}
return this;
};
[AngularJS] Build Your Own ng-controller Directive的更多相关文章
- AngularJs学习笔记--Understanding the Controller Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...
- angularJS 路由加载js controller 未定义 解决方案
说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- Part 16 ng include directive in AngularJS
ng-include directive is used to embed an HTML page into another HTML page. This technique is extreme ...
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- part 4 AngularJS ng src directive
- angularJS 系列(五)--controller AS 语法
原文: http://www.cnblogs.com/whitewolf/p/3493362.html 这篇国外的文章也非常好: http://codetunnel.io/angularjs-cont ...
- angularjs中常用的ng指令介绍【转载】
原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...
- angularjs 与 UEditor开发,添加directive,保证加载顺序正常
'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', ...
随机推荐
- Spring的事务传播属性,数据库的隔离级别
Spring事务的传播属性 REQUIRED 业务方法需要在一个事务中运行,如果方法运行时,已处在一个事务中,那么就加入该事务,否则自己创建一个新的事务.这是spring默认的传播行为. SUPPO ...
- redis集群的搭建
1.首先下载好软件包 #cd /opt/tzr/ #wget http://redis.googlecode.com/files/redis-2.6.11.tar.gz #mkdir /opt/tzr ...
- Echarts显示全球dns server物理位置
今天YY给了我一大串dns server的ip,然后提出将这些ip物理位置显示在世界地图上(仅仅显示每个地区有几个dns server就好),苦逼了一下午,总算告一段落.把里面关键的点贴上来以后看.. ...
- bzoj 2959 长跑(LCT+BCC+并查集)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2959 [题意] n个点,提供操作:连边,修改点权,查询自定义边的方向后起点a终点b能经 ...
- CentOS6 搭建git
rpm -qa | grep zlib-devel 查看是否安装过 ----------------------------------------------------------------- ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- Namespaces(命名空间)
datastore,Blobstore,memcache一起为应用存储数据.这对于在全球范围内分割数据是有用的.比如,一个应用可以为多个公司服务,每个公司可以看到它自己的隔离的应用实例,没有公司可以看 ...
- mac 添加安卓设备的支持
1. 把android设备插到mac电脑上 2. 首先可以看一下之前在该mac电脑上有没有添加过这个 , 命令 : adb devices 如果显示出,下面字样,说明之前添加过了,下面就可以 ...
- C# 6.0 的新特性
1. 自动的属性初始化器Auto Property initialzier 之前的方式: public class AutoPropertyBeforeCsharp6 { private string ...
- 第三次作业,GUI设计之最大子序列和
先吐槽一发!!!学渣表示作业太难了啊!!!!!!做一次作业要用好久好久,要问好多好多大神才能行,虽然确实提高不少,花的时间真是……!!!!! 这次作业费劲心血,希望老师能给个好分数,至少对于学渣来说已 ...