AngularJS指令-來自$ scope的模板和其他指令
[英]AngularJS directive - template from $scope with other directives
問題描述
綁定有點困惑...
如何正確地將值從輸入字段綁定到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
});
和一個簡單的身體：
<body ng-controller="MainCtrl">
<input ng-model="hello">
<input ng-model="world">
<helloworld></helloworld>
</body>
必須編輯我的悲慘例子，因為您的好心回答無法解決我的問題。
我有很多獨特的文字-字母模板，其中一些字段應由用戶填寫。 有十個字段根據選擇的文本有條件地出現。
text1: "Blah, blah {{field.first}}.blah {{filed.second}}"
text2: "{{field.third}} blah, blah {{field.first}}"
text3: "Blah, blah {{field.fourth}}"
and so on...
文本存儲在數據庫中並通過JSON獲得
function(textid) {
$http.get('json/json.php',
{ params: { id: textid } }).
success(function(data, status, headers, config) {
$scope.SelectedText = data;
})
};
我以一種形式組織了它的所有十個輸入字段，這些字段根據所選文本而可見。 完成/填寫的模板應該在表單底部的文本區域中可見，以便復制到其他位置。
- 是否應該更改模板存儲方式？
- 還是回到問題，還有其他方法可以將字段插入視圖嗎？
4 個解決方案
解決方案1
2 2014-09-07 15:56:03
我認為您想要的是：
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>'
};
});
此處的示例： http : //plnkr.co/edit/8YrIjeyt9Xdj2Cf7Izr5?p=preview
代碼的問題在於，當您聲明$scope.fromjson = "{{hello}} {{world}} and have a good time"您沒有綁定任何內容，只是將字符串fromjson到fromjson屬性。
編輯 ：
正如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
我認為您需要的是$interpolate服務和$scope.$watch看看這個jsfiddle：
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 );
});
當然，您應該移動$watch來鏈接指令中的函數，並將hello和world作為范圍變量傳遞給該指令-這只是一個簡單的示例，您可以執行此操作。
解決方案3
1 2014-09-07 16:13:52
一種方式是這樣的：
控制器：
app.controller('MainCtrl', function($scope) {
$scope.hello = 'Hello';
$scope.world = 'World!'
});
指示：
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 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>'
};
});
應該是嗎？
從AngularJS中的指令添加指令
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.