AngularJS指令-来自$ scope的模板和其他指令
[英]AngularJS directive - template from $scope with other directives
问题描述
A bit confused with binding... 
绑定有点困惑...
How to properly bind values from input fields to textarea? 如何正确地将值从输入字段绑定到textarea？
app.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello';
$scope.world = 'World!'
//this template comes from json
$scope.fromjson = "{{hello}} {{world}} and have a good time";
//this template comes from json
});
And a simple body: 和一个简单的身体：
<body ng-controller="MainCtrl">
<input ng-model="hello">
<input ng-model="world">
<helloworld></helloworld>
</body>
A have to edit my miserable example because your kindly answers didn't solve my problem. 必须编辑我的悲惨例子，因为您的好心回答无法解决我的问题。
I had plenty of unique texts - letter templates in which some fields should be filled by user. 我有很多独特的文字-字母模板，其中一些字段应由用户填写。 There are ten fields occuring conditionally depending of text selected. 有十个字段根据选择的文本有条件地出现。
text1: "Blah, blah {{field.first}}.blah {{filed.second}}"
text2: "{{field.third}} blah, blah {{field.first}}"
text3: "Blah, blah {{field.fourth}}"
and so on...
Texts are stored in database and obtained through JSON 文本存储在数据库中并通过JSON获得
function(textid) {
$http.get('json/json.php',
{ params: { id: textid } }).
success(function(data, status, headers, config) {
$scope.SelectedText = data;
})
};
I organized it in one form with all ten input fields, visible depending of selected text. 我以一种形式组织了它的所有十个输入字段，这些字段根据所选文本而可见。 Completed/filled template should be visible in textarea at the bottom of form to be copied to another place. 完成/填写的模板应该在表单底部的文本区域中可见，以便复制到其他位置。
- Should I change the way I store the templates? 是否应该更改模板存储方式？
- or back to question is there any other way the fields could be inserted into view ? 还是回到问题，还有其他方法可以将字段插入视图吗？
4 个解决方案
解决方案1
2 2014-09-07 15:56:03
I think that what you want is this: 我认为您想要的是：
app.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello';
$scope.world = 'World!'
//this template comes from json
$scope.fromjson = function(){
return $scope.hello + " " + $scope.world + " and have a good time";
};
});
app.directive('helloworld', function() {
return {
restrict: 'E',
template: '<textarea>{{fromjson()}}</textarea>'
};
});
Example here: http://plnkr.co/edit/8YrIjeyt9Xdj2Cf7Izr5?p=preview 此处的示例： http : //plnkr.co/edit/8YrIjeyt9Xdj2Cf7Izr5?p=preview
The problem with your code is that when you declare $scope.fromjson = "{{hello}} {{world}} and have a good time" you are not binding anything, you are just assiging that string to the fromjson property. 代码的问题在于，当您声明$scope.fromjson = "{{hello}} {{world}} and have a good time"您没有绑定任何内容，只是将字符串fromjson到fromjson属性。
EDIT : 编辑 ：
As HeberLZ pointed out in the comment bellow, it would be much more efficient to do this instead: 正如HeberLZ在下面的评论中指出的那样，这样做会更有效：
app.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello';
$scope.world = 'World!'
});
app.directive('helloworld', function() {
return {
restrict: 'E',
template: '<textarea>{{ hello + " " + world + " and have a good time"}}</textarea>'
};
});
解决方案2
2 已采纳 2014-09-07 16:07:56
I think what you need is $interpolate service and $scope.$watch take a look at this jsfiddle : 我认为您需要的是$interpolate服务和$scope.$watch看看这个jsfiddle：
http://jsfiddle.net/michal_taborowski/6u45asg9/ http://jsfiddle.net/michal_taborowski/6u45asg9/
app.controller('MainCtrl', function($scope,$interpolate) {
$scope.hello = 'Hello';
$scope.world = 'World!';
//this template comes from json
$scope.template = " {{hello}} {{world}} and have a good time";
//this template comes from json
var updateTemplate = function(oldVal,newVal,scope){
scope.fromjson = $interpolate(scope.template)(scope);
}
$scope.$watch('hello', updateTemplate );
$scope.$watch('world', updateTemplate );
});
Of course you should move $watch to link function in your directive and pass hello and world as scope variable to this directive - this is just a quick example how you can do it. 当然，您应该移动$watch来链接指令中的函数，并将hello和world作为范围变量传递给该指令-这只是一个简单的示例，您可以执行此操作。
解决方案3
1 2014-09-07 16:13:52
One way would be something like this: 一种方式是这样的：
Controller: 控制器：
app.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello';
$scope.world = 'World!'
});
Directive: 指示：
app.directive('helloworld', function($http) {
return {
restrict: 'E',
scope: {
'hello': '=',
'world': '='
},
link: function(scope){
scope.jsonFromServer = '';
$http.get('someUrl').then(function(response){
scope.jsonFromServer = response.data;
});
var updateFromjson = function(){
scope.fromjson = scope.hello + ' ' + scope.world + ' ' + scope.jsonFromServer;
}
scope.$watch('hello', updateFromjson);
scope.$watch('world', updateFromjson);
}
template: '<textarea>{{fromjson}}</textarea>'
};
});
Body: 身体：
<body ng-controller="MainCtrl">
<input ng-model="hello">
<input ng-model="world">
<helloworld hello="hello" world="world"></helloworld>
</body>
解决方案4
0 2014-09-07 15:56:03
app.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello';
$scope.world = 'World!'
//this template comes from json
$scope.aDiffFunc = function() {
return $scope.hello + " " + $scope.world + " and have a good time";
};
//this template comes from json
});
app.directive('helloworld', function() {
return {
restrict: 'E',
template: '<textarea>{{aDiffFunc()}}</textarea>'
};
});
this should be it?? 应该是吗？
http://plnkr.co/edit/ygA4U0v7fnuIbqAilrP7?p=preview http://plnkr.co/edit/ygA4U0v7fnuIbqAilrP7?p=preview
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.