从组件调用控制器的函数 [英] Call a controller's function from component
问题描述
我正在尝试从组件调用控制器的功能.这是我的文件:
controller.js:
$scope.dataTableDevices = {标题:'标题'，颜色:{'背景':'rgb(31, 119, 180)'},项目:[0, 1, 2]};$scope.hacerClick = function(){警报(它有效")；}view.html:
<device-categories data="dataTableDevices"></device-categories>deviceCategories.js:
function deviceCategoriesController() {}widgetsFactory.component('deviceCategories', {templateUrl: 'app/common/js/components/deviceCategories/deviceCategories.html',控制器:设备类别控制器，绑定:{数据:'='}});deviceCategories.html:
点击</md-button> 组件就像具有独立作用域的指令.
如果您想调用父作用域/控制器作用域中的函数，请执行以下操作
考虑在您的控制器中使用以下方法:
angular.module('MyApp').controller('AppController', function ($scope) {$scope.validateInputByUser = 函数(对象){如果 (obj['note'].length > 255) {返回假；}返回真；};});创建组件
angular.module('MyApp').component('注释', {templateUrl: "/Templates/Notes.html",控制器为:'模型'，控制器:NotesController，绑定:{注意:'='}});使用 $scope 注入创建一个名为NotesController"的控制器，因为组件是控制器的子级，控制器范围"在组件中可以作为 $parent 访问.
function NotesController ($scope) {//将父方法绑定到当前组件的作用域$scope.validateInputByUser = $scope.$parent.validateInputByUser;};现在，您可以通过以下方式实现和访问控制器方法:
笔记模板 (/Templates/Notes.html) 上的 Html 看起来像
组件实现页面上的Html看起来像
<块引用>
现在，每次用户输入文本并离开文本区域时，都会调用控制器的函数validateInputByUser".
希望这有帮助！干杯...
I'm trying to call a controller's function from a component. Here are my files:
controller.js:
$scope.dataTableDevices = {
title: 'title',
color: {'background' : 'rgb(31, 119, 180)'},
items: [0, 1, 2]
};
$scope.hacerClick = function(){
alert("it works");
}
view.html:
<device-categories data="dataTableDevices"></device-categories>
deviceCategories.js:
function deviceCategoriesController() {
}
widgetsFactory.component('deviceCategories', {
templateUrl: 'app/common/js/components/deviceCategories/deviceCategories.html',
controller: deviceCategoriesController,
bindings: {
data: '='
}
});
deviceCategories.html:
<md-button ng-click="howToCallhacerClick()">
Click
</md-button>
Components are like directives having an isolated scope.
If you wish to call a function which is in parent scope/ controllers scope then do the following
Consider the following method in your controller:
angular.module('MyApp').controller('AppController', function ($scope) {
$scope.validateInputByUser = function (obj) {
if (obj['note'].length > 255) {
return false;
}
return true;
};
});
Create a component
angular.module('MyApp') .component('notes', { templateUrl: "/Templates/Notes.html", controllerAs: 'model', controller: NotesController, bindings: { note: '=' }});Create a controller with name 'NotesController' with $scope injection, as component is the child of controller, controllers 'scope' is accessible as $parent in the component.
function NotesController ($scope) { // binding parent method to scope of current component $scope.validateInputByUser = $scope.$parent.validateInputByUser; };Now, you can implement and access the controllers method by the following:
Html on notes template (/Templates/Notes.html) looks like
<textarea type="text" ng-model="model.note" ng-blur="validateInputByUser(model)"/>Html on the component implementation page looks like
<notes note="obj.notes"/>
Now, every time user enters text and leaves the text area the controller's function 'validateInputByUser' will be called.
Hope this helps! Cheers...
这篇关于从组件调用控制器的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
