[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', ...
随机推荐
- 3. 使用绘图API自定义视图 --- 旋转的方块
import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor ...
- 10款jquery图片广告特效的预览及源码下载 改自[帅的相对论]
原文格式有问题,我来排版了一下,分享给大家. 1.jQuery仿海尔官网全屏焦点图特效代码 Query仿海尔官网全屏焦点图特效代码,带有左右箭头的jQuery焦点图切换特效.当焦点图切换时,下方的三块 ...
- bzoj 1419 Red is good(期望DP)
[题意] R红B蓝,选红得1选蓝失1,问最优状态下的期望得分. [思路] 设f[i][j]为i个Rj个B时的最优期望得分,则有转移式为: f[i][j]=max{ 0,(f[i-1][j]+1)*(i ...
- [Java Code] 时间维度循环生成代码片段
public static void main(String[] args) throws ParseException { String str = "20140301"; St ...
- Mac vim iterm2配色方案
转自:http://www.vpsee.com/2013/09/use-the-solarized-color-theme-on-mac-os-x-terminal/ 相信长期浸泡在终端和代码的小伙伴 ...
- 【Spark学习】Apache Spark集群硬件配置要求
Spark版本:1.1.1 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4135912.html 目录 存 ...
- 从Count看Oracle执行计划的选择
一. 前言 在调查一个性能问题的时候,一个同事问道,为什么数据库有些时候这么不聪明,明明表上有索引,但是在执行一个简单的count的时候居然全表扫描了!难道不知道走索引更快么? 试图从最简单的coun ...
- Excel动态生成JSON
在最近的一个项目中,有大量的数据源来至Excel,转成JSON供前台使用.Excel数据是人工录入的,难免会有错误,所以中间会有逻辑检查.在C#中读取Excel的方式有很多,网上一搜一大堆,这里我也贴 ...
- nginx配置pathinfo支持,最佳方案 - chunyu
〇. 前言 pathinfo有两个,1 pathinfo()函数,2 $_SERVER['PATH_INFO'].pathinfo()是php的库函数,原生支持不需要nginx配置,$_SERVER[ ...
- 《Java数据结构与算法》笔记-CH3简单排序
class ArrayBub { private long[] arr; private int nElement; public ArrayBub(int size) { arr = new lon ...