[Angular Tutorial] 12 -Event Handlers

在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器。

  ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图。如果我们能仅仅通过点击略图就能把大图片换成略图就好了。让我们看看用Angular如何实现它。

最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同。

组件控制器

app/phone-detail/phone-detail.component.js:

...
controller: [‘$http‘, ‘$routeParams‘,
  function PhoneDetailController($http, $routeParams) {
    var self = this;

    self.setImage = function setImage(imageUrl) {
      self.mainImageUrl = imageUrl;
    };

    $http.get(‘phones/‘ + $routeParams.phoneId + ‘.json‘).then(function(response) {
      self.phone = response.data;
      self.setImage(self.phone.images[0]);
    });
  }
]
...

在phoneDetail组件控制器中,我们创建了mainImageUrl数据模型并且将其默认值设置为第一张图片URL。

我们也创建了setImage()方法(被当做事件处理器),那会改变mainImageUrl的值。

组件模板

app/phone-detail/phone-detail.template.html:

<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" />
...
<ul class="phone-thumbs">
  <li ng-repeat="img in $ctrl.phone.images">
    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
  </li>
</ul>
...

我们将大图片的ngSrc指令绑定为$ctrl.mainImageUrl属性。

我们同时也用略图注册了一个ngClick处理器。当用户点击略图中的一张时,处理器将会使用$ctrl.setImage()方法回调来将$ctrl.mainImageUrl属性的值改变为选中略图的URL。

实验

  ·和ngClick指令类似,该指令将Angular表达式绑定到click事件,还有很多为原生事件而内建得指令,比如dblclickfocus/blur,鼠标和键事件等等。

让我们在phoneDetail组件控制器中添加一个新的控制器方法。

self.onDblclick = function onDblclick(imageUrl) {
  alert(‘You double-clicked image: ‘ + imageUrl);
};

并且在phone-detail.template.html中添加如下<img>元素:

<img ... ng-dblclick="$ctrl.onDblclick(img)" />

现在,无论何时您双击一个略图,都会弹出一个警告框,真恼人!

总结

完成了电话图片的正确交换,我们将在下一步中学习一种更好的获取数据的方法。

时间: 2024-10-15 18:55:13

[Angular Tutorial] 12 -Event Handlers的相关文章

AngularJS学习--- 事件处理(Event Handlers) ng-click操作 step 10

本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checkout step-10 npm start 2.效果 点击右边的小图片,那么左边框中将显示大图片,示例如下: 3.代码实现 查看step-9和step-10之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-9...step-10 Controllers(控制器) app/js/controllers.

[Angular Tutorial]Turorial

(注:我曾经在<不敢止步>一书中看到,作者认为学习一门技术最好的方法就是翻译某部领域书籍,我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial中的Phonecat范例全部翻译一遍,这当然更多是希望自己能得到一个提高,尽力做到最好,当然质量难以保证,所有专有名词尽量不译,所有章节与https://docs.angularjs.org/tutorial/对应,如果可以,希望您能对照两边学习,给我提些意见.那么,开始吧!) 本节翻译自:https://docs.angular

[Angular Tutorial] 0-Bootstraping

在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. 在您继续之前,请确保您已经搭建好您的开发环境并且安装了所有必要的依赖,像这里描述的那样. 在angular-phonecat目录下,运行这条指令: git checkout -f step-0 这将使您工作空间的tutorial app重置到step 0.(注:强烈推荐使用sourcetree,可以

[Angular Tutorial] 3-Components

在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户端代码“掌管”并和视图层实现了动态交互,通过在数据模型和状态中即刻更新视图来反应改变,这经常是用户交互的结果(我们不久将在第5步中看到一个例子),这种做法取代了在服务端创建一个静态HTML页面的做法. 模板(视图层包含绑定和展示逻辑的部分)作为一个蓝图,以此来决定我们数据怎么组织和展示给用户.而控制

[AngularJS] Using the Angular scope $destroy event and method

With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. This is used for cleanup, and gives you a final opportunity to access any data on a scope. Scopes also have a (rarely used) $destroy method that allows

[Angular Tutorial] 8 - Templating Links &amp; Images

在这一步中,我们将会在电话列表中为电话添加略图,并附上链接,当然现在也不会链接去哪.在随后的步骤中,我们将使用这些链接来展示电话列表中额外的信息. ·现在电话列表中会有链接和图片. 最重要的不同在下面列出.您可以点击这里在GitHub上查看全部的不同. 数据 注意到phones.json文件中包含了每一部电话的唯一ID和图片URLs.这些URLs指向app/img/phones/目录. app/phones/phones.json (样本代码片段): [ { ... "id": &qu

[Angular Tutorial] 3-Filtering Repeaters

在上一步中,我们花了很大功夫来布局应用的基础,所以我们现在做点简单点的吧!我们将会添加一个全文本搜索框(没错,这很简单). ·我们的应用现在会有一个搜索框,注意页面中手机列表的改变取决于用户在搜索框键入的内容. 最重要的变化列举如下,当然,你也可以点击这里在GitHub上查看全部的不同. 控制器 我们对控制器不做任何修改. 模板 app/index.html: <div class="container-fluid"> <div class="row&quo

Liferay7 BPM门户开发之4: Activiti事件处理和监听Event handlers

事件机制从Activiti 5.15开始引入,这非常棒,他可以让你实现委托. 可以通过配置添加事件监听器,也可以通过Runtime API加入注册事件. 所有的事件参数子类型都来自org.activiti.engine.delegate.event.ActivitiEvent 包含的信息: type executionId processInstanceId processDefinitionId 事件监听 其中,JOB_EXECUTION_SUCCESS 和JOB_EXECUTION_FAIL

[Angular Tutorial] 13 -REST and Custom Services

在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTTP方法和URLs. 最重要的变化列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 RESTful功能由Angular的ngResource模块提供,这是从Angular核心模块中独立出来的. 由于我们使用了Bower来安装客户端的依赖,这一步更新bower.json配置文件来添加新的依