问题描述
限时送ChatGPT账号..我正在尝试从组件调用控制器的功能.这是我的文件:
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() {}widgetsFactoryponent('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')ponent('注释', {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() {
}
widgetsFactoryponent('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')
ponent('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屋!
更多推荐
[db:关键词]
发布评论