首页 > 代码库 > [AngularJS] Build Your Own ng-controller Directive

[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