[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;
  };
时间: 2024-08-24 18:23:59

[AngularJS] Build Your Own ng-controller Directive的相关文章

angularjs学习笔记--ng-model、controller、DI、$scope、$provide

依赖: RESTful功能由angularjs在ngResource模块中提供,该模块与核心angularjs框架分开分发. ng-model: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js

Part 15 AngularJS ng init directive

The ng-init directive allows you to evaluate an expression in the current scope. In the following example, the ng-init directive initializes employees variable which is then used in the ng-repeat directive to loop thru each employee. In a real world

Part 16 ng include directive in AngularJS

ng-include directive is used to embed an HTML page into another HTML page. This technique is extremely useful when you want to reuse a specific view in multiple pages in your application. The value of ng-include directive can be the name of the HTML

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 want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

AngularJs学习笔记--Understanding the Controller Component

原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(http://www.cnblogs.com/lcllao/archive/2012/09/23/2698651.html)的实例.当我们或者angular通过scope.$new API(h

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

原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提供的或者自定义的标签和属性,用来增强HTML表现力. 标记(markup).即双大括号{{}},可将数据单向绑定到HTML中. 过滤器(filter).用来格式化输出数据. 表单控制.用来增强表单的验证功能. 其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-

较完整的angularjs+bootstrap应用程序接口controller

define(["app"],function(app){ return app.controller("transactionsFundController", function($scope,$compile,$location) { $scope.transactionsFund={};//定义对象 $scope.transactionsFundList=[];//定义对象数组 $scope.pages = 1; //默认查询总页数 $scope.size =

angularjs 中使用 service 在controller 之间 share 对象和数据

在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是使用创建一个service, 在service 中存储公共的数据,然后把service 注入到controller中来达到share 数据的目的. 下面是最简单的一个sample 列子 angularjs 模板页面, 有userContoller 和 customerController,我们将在这两个control

AngularJS标准Web业务流程开发框架-4.AngularJS四大模块之一:Controller

一.Controller的创建 angular.controller("name",funtion($scope){ }) 1.name:控制器的名称(建议参考Java包的命名规范:点的方式进行命名): 2.function:回调函数的构造方法(实际是对象,主要考虑到类的调用): 3.$scope相当于mvvm模式的viewmodel,支持变量.函数: 3.1.$ccope的由来: $injector注射完成后创建的$rootScope(根作用域root Viewmodel,$scop