码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs1.5.0-ngController

时间:2015-09-28 17:36:08      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

查看Angularjs的ngController的API 文档,发现官方提供的示例跟平时我的使用是不一样的。

API传送门:https://docs.angularjs.org/api/ng/directive/ngController

Plunker地址:http://plnkr.co/edit/b07kfAvLtUhVYtxYUYky?p=preview

官方是怎么解释ng-controller使用的方法呢——两种声明方法:

1. one binds methods and properties directly onto the controller using this:

ng-controller = ‘SettingsController1 as settings‘

粗略的翻译一下,如有错误,请指正:直接在一个使用this的controller上绑定方法和属性的,在html页面上作如下声明: ng-controller = ‘SettingsController1 as settings‘。

个人认为这里定义的SettingsController1其实相当于JavaScript的类。

2. one injects $scope into the controller: ng-controller = "SettiongsController2"

把$scope作为值传入Controller中就使用ng-controller = "SettiongsController2"。

所以,ng-controller的第二种用法,就是可以使用一个JavaScript的类来作为个controller。

代码如下:

1. 首先在js文件中声明一个类,并且使用angular.module.controller来定义一个controller。


function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: ‘phone‘, value: ‘408 555 1212‘},
    {type: ‘email‘, value: ‘john.smith@example.org‘} ];
}

SettingsController1.prototype.greet = function() {
  alert(this.name);
};
angular.module(‘controllerAsExample‘, [])
  .controller(‘SettingsController1‘, SettingsController1);

2. 在html中使用ng-app 和ng-controller。

 <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">

<label>Name: <input type="text" ng-model="settings.name"/></label>

<button ng-click="settings.greet()">greet</button><br/>

</div>

AngularJs1.5.0-ngController

标签:

原文地址:http://www.cnblogs.com/Yaxian/p/4844494.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!