[英]JS - AngularJS - Get data of an directive from a controller
I´ll give my best to make my problem understandable: 我会尽力使我的问题易于理解:
I have a directive. 我有一条指令。 This directive handles/alters also some data it displays.
该指令还处理/更改其显示的某些数据。 Now I was wondering how I can access these data from a parent scope eg the controller.
现在我想知道如何从父范围(例如控制器)访问这些数据。 I am currently getting access to the scope by selecting the element and ask for the corresponding scope:
我目前正在通过选择元素并要求相应的范围来访问该范围:
element.scope()
It works fine but it occurs to me that this is kind of a - lets say - unconventional or odd way to get the scope of an directive. 它工作正常,但是在我看来,这是一种获取指令范围的非常规或奇怪的方法。
I apologize for my english (I still practicing) and hope you guys can help me. 我为我的英语(我仍在练习)道歉,并希望你们能帮助我。 Thank you in advance :)
先感谢您 :)
OK, Based on the comments your directive is some kind of a form. 好的,根据注释,您的指令是某种形式的。 There are two approaches for controlling the data inside a directive:
有两种方法可以控制指令内的数据:
I go with the solution number 1 which is more preferable in my guess. 我选择的解决方案编号1是我认为更可取的。 Let's say your template of directive is something like this,We call it
template.html
: 假设您的指令模板是这样的,我们称其为
template.html
:
<form name="directive_from" ng-submit="submit_form()">
<input type="text" ng-model="form.name" name="username" placeholder="username"><br>
<button type="submit">Submit</button>
</form>
Because of the time,I skipped validation but you can do that easily :) 由于时间原因,我跳过了验证,但是您可以轻松做到这一点:)
And the directive: 和指令:
angular.module('app')
.directive('formDirective',function(){
return {
restrict: 'E',
templateUrl: 'template.html',
scope: {
form: '=formData',
submit_form: '@formFunc'
},
controller: ['$scope', function($scope) {
//some extra logic or binding if you need
}
}
})
OK,Now our directive which we call it formDirective
accepts two parameters: 好的,现在我们称为伪指令
formDirective
指令接受两个参数:
formData
which is an object and holds user inserted data. formData
是一个对象,其中包含用户插入的数据。 formFunc
which is a function for submitting the form. formFunc
是用于提交表单的函数。 Now parent controller: 现在是父控制器:
angular.module('app')
.controller('MainCtrl', ['$scope', function($scope) {
$scope.form_object = {};
$scope.submit_it = function() {
//Do whatever you like with the $scope.form_object
}
}
And let's see the view: 让我们看一下视图:
<div ng-controller="MainCtrl">
<form-directive form="form_object" form-func="submit_it()"></form-directive>
</div>
That's it! 而已! It's so simple example that I believe you can customize it by your needs,But the main logic for controlling the data is something like that.
这个例子非常简单,我相信您可以根据需要对其进行自定义,但是控制数据的主要逻辑就是这样。 for example you can pass a function for
ng-change
on the input field or add more input fields or... 例如,您可以在输入字段上传递
ng-change
函数,或添加更多输入字段,或...
@lilly: I think you you are looking for data exchange between the parent scope and isolated scope which is possible via '=' @lilly:我想您正在寻找父范围和孤立范围之间的数据交换,可以通过'='
Here is the working fiddle 这是工作的小提琴
angular.module('App', [])
.controller('Main', ['$scope', function ($scope) {
$scope.exchange = {};
$scope.exchange.value = "initialized by controller";
}])
.directive('inputValue', function($timeout) {
return {
restrict: 'A',
scope: {exchangeValue: '='},
link: function(scope, element, attrs) {
$timeout(function(){
scope.exchangeValue="changed by directive";
},2000);
}
};
});
http://jsfiddle.net/tiru/dJty6/43/ http://jsfiddle.net/tiru/dJty6/43/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.