/**

 * 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的更多相关文章

  1. AngularJs学习笔记--Understanding the Controller Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...

  2. angularJS 路由加载js controller 未定义 解决方案

    说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...

  3. 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 ...

  4. 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 ...

  5. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  6. part 4 AngularJS ng src directive

  7. angularJS 系列（五）--controller AS 语法

    原文: http://www.cnblogs.com/whitewolf/p/3493362.html 这篇国外的文章也非常好: http://codetunnel.io/angularjs-cont ...

  8. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  9. angularjs 与 UEditor开发，添加directive，保证加载顺序正常

    'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', ...

随机推荐

  1. [Everyday Mathematics]20150129

    计算下列积分 $$\bex \int_a^b (x-a)^2(b-x)^3\rd x. \eex$$

  2. Codeforces 167B Wizards and Huge Prize(概率dp)

    题意: n个人,开始有一个容量为k得背包,击败一个人背包可以获得一定容量或得到一个财富(放入背包内),给出击败每个人的概率,求至少击败l个人,且背包容量大于获得的总财富值的概率 分析: 状态好确定,d ...

  3. POJ 3321- Apple Tree（标号+BIT）

    题意: 给你一棵树,初始各节点有一个苹果,给出两种操作,C x 表示若x节点有苹果拿掉,无苹果就长一个. Q x查询以x为根的子树中有多少个苹果. 分析: 开始这个题无从下手,祖先由孩子的标号不能确定 ...

  4. codeforces 687D Dividing Kingdom II 带权并查集（dsu）

    题意:给你m条边,每条边有一个权值,每次询问只保留编号l到r的边,让你把这个图分成两部分 一个方案的耗费是当前符合条件的边的最大权值(符合条件的边指两段点都在一个部分),问你如何分,可以让耗费最小 分 ...

  5. 使用matplotlib绘制带图例的图表

    #coding=utf8 from pylab import * plt.figure(figsize=(8,10), dpi=50) plt.plot(do_tow2[28:508],do_prn2 ...

  6. hadoop2.7【单节点】单机、伪分布、分布式安装指导

    问题导读 1.从本文部署实际部署,总结本地模式.伪分布.分布式的区别是什么?2.单机是否是伪分布?3.本地模式是否可以运行mapreduce? 来源:about云 http://www.aboutyu ...

  7. 卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】

    问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没 ...

  8. Tengine – Nginx衍生版

    Tengine是淘宝在Nginx基础上开发的一个衍生版.官方的简介说针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很好的检验. ...

  9. UVALive 7461 Separating Pebbles （计算几何）

    Separating Pebbles 题目链接: http://acm.hust.edu.cn/vjudge/contest/127401#problem/H Description http://7 ...

  10. HDU 5805 NanoApe Loves Sequence （模拟）

    NanoApe Loves Sequence 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5805 Description NanoApe, the ...