簡體中文(ZH-CN) English(EN) 繁體中文(ZH-TW) 日本語(JA) ???(KO) Melayu(MS) Fran?ais(FR) Deutsch(DE)

ディレクトリ 検索

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

?
このドキュメントでは、 php中國語ネットマニュアルリリース

テキスト

AngularJS: API: ng/directive/ngController

ngController

- directive in module ng

ngController指令給視圖添加一個(gè)控制器。這是angular支持基于“視圖-模型-控制器”設(shè)計(jì)模式原則的主要方面。

Angular中的MVC組件有：

模型 — 模型是一個(gè)域的屬性集合；域被附加到DOM上，通過綁定來存取域?qū)傩浴?/li>
視圖 — 模板(進(jìn)行數(shù)據(jù)綁定的HTML)會(huì)被呈現(xiàn)到視圖中。
控制器 — ngController指令聲明一個(gè)控制器類；該類包含了業(yè)務(wù)邏輯，在應(yīng)用后臺(tái)使用函數(shù)和值來操控域中的屬性。

注意，你也能使用$route服務(wù)定義一個(gè)路由來將控制器附加到DOM上。一個(gè)常見錯(cuò)誤是在模板上再次使用ng-controller定義一個(gè)控制器。這將引起控制器被附加和執(zhí)行兩次。

指令信息

這個(gè)指令會(huì)創(chuàng)建新的作用域(scope)。
這個(gè)指令執(zhí)行優(yōu)先級為0.

用法

作為屬性使用:
```
<ANY
  ng-controller="">
...
</ANY>
```

參數(shù)

參數(shù)	類型	詳述
ngController	expression	一個(gè)全局構(gòu)造函數(shù)，或是當(dāng)前域的一個(gè)表達(dá)式，執(zhí)行后得到一個(gè)構(gòu)造函數(shù)。控制器實(shí)例能夠發(fā)布到域?qū)傩陨?，通過`as propertyName`指定一個(gè)屬性名。

示例

這是一個(gè)編輯用戶聯(lián)系信息的簡單表單。添加、刪除、清除和歡迎方法定義在控制器中。這些方法能很方便的從angular標(biāo)記被調(diào)用。任何數(shù)據(jù)的改變都會(huì)自動(dòng)反應(yīng)到視圖，而不需要手動(dòng)更新。

下面是兩種不同的定義風(fēng)格：

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

第二個(gè)形式在 Angular社區(qū)中是最常使用的方法，它常用在示例和本指南中。然而，直接綁定屬性到控制器也有它們的優(yōu)勢和適用范圍。

使用controller as 能夠明確在模板中使用哪一個(gè)控制器來存取，當(dāng)您有多個(gè)控制器適用于一個(gè)元素時(shí)。
如果你正在作為類來寫你的控制器，你可以更輕松地訪問屬性與方法，控制器代碼內(nèi)不用關(guān)心是否會(huì)應(yīng)用在域上。
因?yàn)榻壎〞r(shí)總是有一個(gè) . ，你不必?fù)?dān)心原型繼承覆蓋本體。

下面的例子演示使用 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”到控制器的方式：