Angular1.0 在Directive中调用Controller的方法

Controller中定义了$scope.method = function(){}

Directive中需要引入$scope

http://stackoverflow.com/questions/23636727/how-to-call-controller-function-from-directive

JS:

angular.module(‘myApp‘, [])
.controller(‘MyController‘, function($scope){
  $scope.showAlert = function(value){
    alert(‘Called from directive: ‘ + value);
  };
})
.directive(‘myDirective‘, function(){
  return {
    restrict: ‘E‘,
    scope: {
      alert: ‘&‘
    },
    controller: function($scope){
      $scope.value = ‘directive scope value‘;
    },
    template: ‘<button ng-click="alert({message: value})">Alert</button>‘
  }
});
HTML:

<body ng-app="myApp" ng-controller="MyController">
  <my-directive alert="showAlert(message)"></my-directive>
</body>

My recommendation is to use $emit instead of calling a method of the controller directly in your directive.

Directives should be always independent components, if inside the directive there is a call to a method from a controller(outside the directive) this will create a dependency between my directive and the controller and of course this will force one not being able to exist without the other.

If I would have to apply a design principle to a directive it will be the S in SOLID, Single responsibility principle. Directives should be able to encapsulate and work independently.

On my controller the event is captured using $on like:

$scope.$on("ValueChanged", function(event, ars){
   ... //your event has been triggered.
});

或者

var directive= function ( $sessionStorage, $localStorage) {
            function work(scope, element, attrs, formCtrl) {
                var watchPromise = attrs.createClaimForm || null;
                element.bind(‘keypress‘, function (event) {
//此处scope就是$scope
                        scope.addBlankRowData();
                    }
                });

 return {
                require: "form",
                restrict: "A",
                link: work
            }
 };

Controller中this.method = function(){}是获取不到的, 必须$scope

时间: 2024-07-29 10:20:22

Angular1.0 在Directive中调用Controller的方法的相关文章

cocos2d-x 3.0 在C++中调用lua函数

代码用的是<cocos2d-x 3.0 在lua中调用自定义类>中的代码. 在上篇的基础上进行扩充. 写lua函数 local function process_packet(user_data) if user_data then user_data = tolua.cast(user_data, "user_data"); print (user_data:uid()); print (user_data:uname()); end end local ghall =

继承实现的原理、子类中调用父类的方法、封装

一.继承实现的原来 1.继承顺序 Python的类可以继承多个类.继承多个类的时候,其属性的寻找的方法有两种,分别是深度优先和广度优先. 如下的结构,新式类和经典类的属性查找顺序都一致.顺序为D--->A--->E--->B--->C. class E: def test(self): print('from E') class A(E): def test(self): print('from A') class B: def test(self): print('from B'

Day17:继承实现的原理、子类中调用父类的方法、封装

一.继承实现的原来 1.继承顺序 Python的类可以继承多个类.继承多个类的时候,其属性的寻找的方法有两种,分别是深度优先和广度优先. 如下的结构,新式类和经典类的属性查找顺序都一致.顺序为D--->A--->E--->B--->C. class E: def test(self): print('from E') class A(E): def test(self): print('from A') class B: def test(self): print('from B'

Swift使用WKWebView在iOS应用中调用Web的方法详解

这篇文章主要介绍了Swift使用WKWebView在iOS应用中调用Web的方法详解,使用WKWebView便等于使用和Safari中相同的JavaScript解释器,用来替代过去的UIWebView,需要的朋友可以参考下 自从iOS8开始,Apple引入了WKWebView欲代替UIWebView.相比而言,WKWebView消耗内从更少,功能也更加强大.让我们来看看WKWebView怎么使用吧! 0.初始化(1)首先需要引入WebKit库 复制代码代码如下: #import <WebKit/

avaScript文件中调用AngularJS内部方法或改变$scope变量

需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controller来获取app var appElement = document.querySelector('[ng-controller=mainController]'); 然后在获取$scope变量: var $scope = angular.element(appElement).scope(); 如

iOS 在object-c 中调用c文件 方法

1,新建c 头文件  lib.h 定义 c 函数 2,新建 c 实现文件,新建模板选中 c File  lib.c 3,oc 中调用,引用 c 头文件 lib.h ok .搞定 iOS 在object-c 中调用c文件 方法,布布扣,bubuko.com

QuartusII中调用Modelsim的方法

Modelsim的使用 1,  建立工程编译通过之后--证明实例工程无语法等简单错误.编写testbench 2,  将testbench 添加到工程中,进行编译通过.会在工程的file中看到testbench也在工程file中--证明testbench无简单语法错误(注:test bench中没有引用实例工程,QuartusII 是不会报错的,将test bench当独立文件进行处理. Modelsim 也不会报错.当然,仿真没有结果产生,) 3,  Assignment   -->  Set

struts2在配置文件中调用Action的方法返回值

struts2在配置文件中可以调用Action的方法返回值 1.Action中 //文件下载名 public String getDownloadFileName(){ String downloadFileName = ""; String filename = fileName + ".xls"; try { downloadFileName = URLEncoder.encode(filename,"UTF-8"); } catch (Un

从类库中调用log4net的方法简介

大家在开发程序的时候,都会也必须用上日志功能.当前常用的日志工具可能就是log4net了.在当前基于框架的开发模式下,log4net都是在类库中调用(在核心服务类中作为一个服务供解决方案里的所有项目调用).在这种情况下常见的log4net调用设置显然是无法实现日志功能.经过实验,在完成以下几个步骤后,可以实现上述的功能:1.建立一个类库,在引用中加载log4net.dll:2.在AssemblyInfo.cs文件最后添加[assembly: log4net.Config.XmlConfigura