[AngularJS] Accessing The View-Model Inside The link() When Using controllerAs

If u using controller & controllerAs in directive, then the link()‘s 4th param ‘controller‘ will refer to the controller u defined before.

 function MessageController(){
  var vm = this;

  vm.message = "Hello";
 }

function greeting(){
    function link(scope, element, attrs, ctrl){
       ctrl.message = ctrl.message + ‘ ‘ + scope.name;
    }

    return {
      controller: ‘MessageController‘,
      controllerAs: ‘vm‘,
      link: link,
      scope: {
        name: ‘@‘
      },
      template: ‘<h1>{{vm.message}}</h1>‘
    };
}

angular.module(‘app‘, [])
  .directive(‘greeting‘, greeting)
  .controller(‘MessageController‘, MessageController);

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
<greeting name="Zhentian"></greeting>
</body>
</html>

时间： 2024-07-31 14:32:24

[AngularJS] Accessing The View-Model Inside The link() When Using controllerAs的相关文章

在ASP.NET MVC中使用Knockout实践04，控制View Model的json格式内容

通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成json格式,通过pre元素显示出来. <input data-bind="value: name"/><hr/> <select data-bind="options: categories, value: category" >&

在ASP.NET MVC中使用Knockout实践02，组合View Model成员、Select绑定、通过构造器创建View Model，扩展View Model方法

本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View Model添加扩展方法. □ 使用ko.computed(fn)计算成员有时候,我们希望把View Model中的几个成员组合起来成为一个新成员,使用ko.computed(fn)可实现. 接着上一篇,为productViewModel这个json对象增加一个计算成员. <div data-bi

WPF MVVM 架构 Step By Step(6)（把actions从view model解耦）

到现在为止,我们创建了一个简单的MVVM的例子,包含了实现了的属性和命令.我们现在有这样一个包含了例如textbox类似的输入元素的视图,textbox用绑定来和view model联系,像点击button这样的行为用命令来联系.view model和model在内部通信. 但是在上面的架构中有一个问题,command类和view model有很严重的耦合.如果你记得command类的代码(在下面也有展示),在构造函数中传递view model对象,意味着这个command 类不能再其他的vie

AngularJS最理想开发工具WebStorm（LINK）

AngularJS最理想开发工具WebStorm: http://blog.fens.me/angularjs-webstorm-ide/ AngularJS最理想开发工具WebStorm(LINK),布布扣,bubuko.com

asp.net MVC: PagedList + View Model

To pass view model with PagedList: 1. Controller action must use HttpGet and use View Model as action parameter public ActionResult Index(UserIndexModel model) 2. In the action return the view model with PagingMetaData model.PagingMetaData = new Stat

View Model转集合

@{ Layout = null;}@using MvcApplication2.Models <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title></head><body> <div>

Core Mvc传值ViewData、ViewBag和return view(model)

先定义一个Model类Student namespace Lession.Models { public class Student { public string Name { get; set; } public int Age { get; set; } public string Sex { get; set; } } } 控制器如下: using Lession.Models; using Microsoft.AspNetCore.Mvc; namespace Lession.Cont

【转】AngularJs 弹出框 model（模态框）

原文转至 http://blog.csdn.net/violet_day/article/details/17170585 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制

[AngularJS] Accessing Services from Console

Using the Chrome console, you can access your AngularJS injectable services. This is down and dirty debugging, and can be a lifesaver in troubling times. You can get services/factories in console by using: var $injector = angular.element($0).injector