AngularJS 中文手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Verzeichnis suchen
AngularJS API Reference auto auto/service auto/service/$injector auto/service/$provide ng ng/directive ng/directive/a ng/directive/form ng/directive/input ng/directive/input[checkbox] ng/directive/input[date] ng/directive/input[dateTimeLocal] ng/directive/input[email] ng/directive/input[month] ng/directive/input[number] ng/directive/input[radio] ng/directive/input[text] ng/directive/input[time] ng/directive/input[url] ng/directive/input[week] ng/directive/ngApp ng/directive/ngBind ng/directive/ngBindHtml ng/directive/ngBindTemplate ng/directive/ngBlur ng/directive/ngChange ng/directive/ngChecked ng/directive/ngClass ng/directive/ngClassEven ng/directive/ngClassOdd ng/directive/ngClick ng/directive/ngCloak ng/directive/ngController ng/directive/ngCopy ng/directive/ngCsp ng/directive/ngCut ng/directive/ngDblclick ng/directive/ngDisabled ng/directive/ngFocus ng/directive/ngForm ng/directive/ngHide ng/directive/ngHref ng/directive/ngIf ng/directive/ngInclude ng/directive/ngInit ng/directive/ngKeydown ng/directive/ngKeypress ng/directive/ngKeyup ng/directive/ngList ng/directive/ngModel ng/directive/ngModelOptions ng/directive/ngMousedown ng/directive/ngMouseenter ng/directive/ngMouseleave ng/directive/ngMousemove ng/directive/ngMouseover ng/directive/ngMouseup ng/directive/ngNonBindable ng/directive/ngOpen ng/directive/ngPaste ng/directive/ngPluralize ng/directive/ngReadonly ng/directive/ngRepeat ng/directive/ngSelected ng/directive/ngShow ng/directive/ngSrc ng/directive/ngSrcset ng/directive/ngStyle ng/directive/ngSubmit ng/directive/ngSwitch ng/directive/ngTransclude ng/directive/ngValue ng/directive/script ng/directive/select ng/directive/textarea ng/filter ng/filter/currency ng/filter/date ng/filter/filter ng/filter/json ng/filter/limitTo ng/filter/lowercase ng/filter/number ng/filter/orderBy ng/filter/uppercase ng/function ng/function/angular.bind ng/function/angular.bootstrap ng/function/angular.copy ng/function/angular.element ng/function/angular.equals ng/function/angular.extend ng/function/angular.forEach ng/function/angular.fromJson ng/function/angular.identity ng/function/angular.injector ng/function/angular.isArray ng/function/angular.isDate ng/function/angular.isDefined ng/function/angular.isElement ng/function/angular.isFunction ng/function/angular.isNumber ng/function/angular.isObject ng/function/angular.isString ng/function/angular.isUndefined ng/function/angular.lowercase ng/function/angular.module ng/function/angular.noop ng/function/angular.toJson ng/function/angular.uppercase ng/object ng/object/angular.version ng/provider ng/provider/$animateProvider ng/provider/$compileProvider ng/provider/$controllerProvider ng/provider/$filterProvider ng/provider/$httpProvider ng/provider/$interpolateProvider ng/provider/$locationProvider ng/provider/$logProvider ng/provider/$parseProvider ng/provider/$rootScopeProvider ng/provider/$sceDelegateProvider ng/provider/$sceProvider ng/service ng/service/$anchorScroll ng/service/$animate ng/service/$cacheFactory ng/service/$compile ng/service/$controller ng/service/$document ng/service/$exceptionHandler ng/service/$filter ng/service/$http ng/service/$httpBackend ng/service/$interpolate ng/service/$interval ng/service/$locale ng/service/$location ng/service/$log ng/service/$parse ng/service/$q ng/service/$rootElement ng/service/$rootScope ng/service/$sce ng/service/$sceDelegate ng/service/$templateCache ng/service/$timeout ng/service/$window ng/type ng/type/$cacheFactory.Cache ng/type/$compile.directive.Attributes ng/type/$rootScope.Scope ng/type/angular.Module ng/type/form.FormController ng/type/ngModel.NgModelController ngAnimate ngAnimate/provider ngAnimate/provider/$animateProvider ngAnimate/service ngAnimate/service/$animate ngCookies ngCookies/service ngCookies/service/$cookies ngCookies/service/$cookieStore ngMessages ngMessages/directive ngMessages/directive/ngMessage ngMessages/directive/ngMessages ngMock ngMock/function ngMock/function/angular.mock.dump ngMock/function/angular.mock.inject ngMock/function/angular.mock.module ngMock/object ngMock/object/angular.mock ngMock/provider ngMock/provider/$exceptionHandlerProvider ngMock/service ngMock/service/$exceptionHandler ngMock/service/$httpBackend ngMock/service/$interval ngMock/service/$log ngMock/service/$timeout ngMock/type ngMock/type/angular.mock.TzDate ngMockE2E ngMockE2E/service ngMockE2E/service/$httpBackend ngResource ngResource/service ngResource/service/$resource ngRoute ngRoute/directive ngRoute/directive/ngView ngRoute/provider ngRoute/provider/$routeProvider ngRoute/service ngRoute/service/$route ngRoute/service/$routeParams ngSanitize ngSanitize/filter ngSanitize/filter/linky ngSanitize/service ngSanitize/service/$sanitize ngTouch ngTouch/directive ngTouch/directive/ngClick ngTouch/directive/ngSwipeLeft ngTouch/directive/ngSwipeRight ngTouch/service ngTouch/service/$swipe

©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben

Figuren

AngularJS: API: ng/directive/ngController

ngController

  1. - directive in module ng

ngController指令给视图添加一个控制器。这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。

Angular中的MVC组件有：

  • 模型 — 模型是一个域的属性集合；域被附加到DOM上，通过绑定来存取域属性。
  • 视图 — 模板(进行数据绑定的HTML)会被呈现到视图中。
  • 控制器 — ngController指令声明一个控制器类；该类包含了业务逻辑，在应用后台使用函数和值来操控域中的属性。

注意，你也能使用$route服务定义一个路由来将控制器附加到DOM上。一个常见错误是在模板上再次使用ng-controller定义一个控制器。这将引起控制器被附加和执行两次。

指令信息

  • 这个指令会创建新的作用域(scope)。
  • 这个指令执行优先级为0.

用法

  • 作为属性使用: 
    <ANY
  ng-controller="">
...
</ANY>

参数

参数 类型 详述
ngController expression

一个全局构造函数，或是当前域的一个表达式，执行后得到一个构造函数。控制器实例能够发布到域属性上，通过as propertyName指定一个属性名。

示例

这是一个编辑用户联系信息的简单表单。添加、删除、清除和欢迎方法定义在控制器中。这些方法能很方便的从angular标记被调用。任何数据的改变都会自动反应到视图，而不需要手动更新。

下面是两种不同的定义风格：

  • 直接在控制器上使用 this来绑定方面和属性: ng-controller="SettingsController1 as settings"
  • 在控制器里注入$scope: ng-controller="SettingsController2"

第二个形式在 Angular社区中是最常使用的方法，它常用在示例和本指南中。然而，直接绑定属性到控制器也有它们的优势和适用范围。

  • 使用controller as 能够明确在模板中使用哪一个控制器来存取，当您有多个控制器适用于一个元素时。
  • 如果你正在作为类来写你的控制器，你可以更轻松地访问属性与方法，控制器代码内不用关心是否会应用在域上。
  • 因为绑定时总是有一个 . ，你不必担心原型继承覆盖本体。

下面的例子演示使用 controller as 的语法。

index.html
<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
  Name: <input Type="text" ng-model="settings.name"/>
  [ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
  Contact:
  <ul>
    <li ng-repeat="contact in settings.contacts">
      <select ng-model="contact.type">
         <option>phone</option>
         <option>email</option>
      </select>
      <input Type="text" ng-model="contact.value"/>
      [ <a href="" ng-click="settings.clearContact(contact)">clear</a>
      | <a href="" ng-click="settings.removeContact(contact)">X</a> ]
    </li>
    <li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
 </ul>
</div>
app.js
angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

Function SettingsController1() {
  this.名称= "John Smith";
  this.contacts = [
    {Type: 'phone', value: '408 555 1212'},
    {Type: 'email', value: 'john.smith@example.org'} ];}

SettingsController1.prototype.greet = Function() {
  alert(this.名称);};

SettingsController1.prototype.addContact = Function() {
  this.contacts.push({Type: 'email', value: 'yourname@example.org'});};

SettingsController1.prototype.removeContact = Function(contactToRemove) {
 var index = this.contacts.indexOf(contactToRemove);
  this.contacts.splice(index, 1);};

SettingsController1.prototype.clearContact = Function(contact) {
  contact.Type= 'phone';
  contact.value = '';};
protractor.js
it('should check controller as', Function() {
  var container = element(by.id('ctrl-as-exmpl'));
    expect(container.element(by.model('settings.name'))
      .getAttribute('value')).toBe('John Smith');

  var firstRepeat =
      container.element(by.repeater('contact in settings.contacts').row(0));
  var secondRepeat =
      container.element(by.repeater('contact in settings.contacts').row(1));

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('408 555 1212');

  expect(secondRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('john.smith@example.org');

  firstRepeat.element(by.linkText('clear')).click();

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('');

  container.element(by.linkText('add')).click();

  expect(container.element(by.repeater('contact in settings.contacts').row(2))
      .element(by.model('contact.value'))
      .getAttribute('value'))
      .toBe('yourname@example.org');});
下面的例子演示“注入$scope”到控制器的方式：

index.html
<div id="ctrl-exmpl" ng-controller="SettingsController2">
  Name: <input Type="text" ng-model="name"/>
  [ <a href="" ng-click="greet()">greet</a> ]<br/>
  Contact:
  <ul>
    <li ng-repeat="contact in contacts">
      <select ng-model="contact.type">
         <option>phone</option>
         <option>email</option>
      </select>
      <input Type="text" ng-model="contact.value"/>
      [ <a href="" ng-click="clearContact(contact)">clear</a>
      | <a href="" ng-click="removeContact(contact)">X</a> ]
    </li>
    <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
 </ul>
</div>
app.js
angular.module('controllerExample', [])
  .controller('SettingsController2', ['$scope', SettingsController2]);

Function SettingsController2($scope) {
  $scope.name= "John Smith";
  $scope.contacts = [
    {Type:'phone', value:'408 555 1212'},
    {Type:'email', value:'john.smith@example.org'} ];

  $scope.greet = Function() {
    alert($scope.name);
  };

  $scope.addContact = Function() {
    $scope.contacts.push({Type:'email', value:'yourname@example.org'});
  };

  $scope.removeContact = Function(contactToRemove) {
    var index = $scope.contacts.indexOf(contactToRemove);
    $scope.contacts.splice(index, 1);
  };

  $scope.clearContact = Function(contact) {
    contact.Type= 'phone';
    contact.value = '';
  };}
protractor.js
it('should check controller', Function() {
  var container = element(by.id('ctrl-exmpl'));

  expect(container.element(by.model('name'))
      .getAttribute('value')).toBe('John Smith');

  var firstRepeat =
      container.element(by.repeater('contact in contacts').row(0));
  var secondRepeat =
      container.element(by.repeater('contact in contacts').row(1));

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('408 555 1212');
  expect(secondRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('john.smith@example.org');

  firstRepeat.element(by.linkText('clear')).click();

  expect(firstRepeat.element(by.model('contact.value')).getAttribute('value'))
      .toBe('');

  container.element(by.linkText('add')).click();

  expect(container.element(by.repeater('contact in contacts').row(2))
      .element(by.model('contact.value'))
      .getAttribute('value'))
      .toBe('yourname@example.org');});
Vorheriger Artikel： Nächster Artikel：