模型在指令中的双向绑定不起作用
问题描述:
基于another question from me的注释,我尝试创建一个指令来减少我的代码。在这里我得到了什么:模型在指令中的双向绑定不起作用
指令(用于测试非常小的后来人们将更多的元素):
BebuApp.directive('inputText', function(){
return {
restrict: 'E',
scope: {
model: '='
},
template: '<input type="text" ng-model="model" />'
}
});
国家:
.state('app', {
abstract: true,
url: '',
templateUrl: 'layout.html',
resolve: {
authorize: function ($http) {
return $http.post(API.URL_PING);
}
}
})
.state('app.application-detail', {
url: "/bewerbungen/{id}",
templateUrl: "views/application-detail/application-detail.html",
data: {pageTitle: 'Meine Bewerbungen', pageSubTitle: ''},
controller: "ApplicationDetailController",
resolve: {
prm: function ($http, $stateParams) {
// $http returns a promise for the url data
return $http.get(API.URL_JOBAPPLICATION_GET_DETAILS + "/" + $stateParams.id);
}
}
})
控制器:
'use strict';
BebuApp.controller('ApplicationDetailController', function($rootScope, $scope, $http, $stateParams, API, prm) {
$scope.jobApplication = prm.data;
console.log(prm);
$scope.$on('$viewContentLoaded', function() {
// initialize core components
App.initAjax();
});
});
模板/ View:
<div class="margin-top-10">
{{ jobApplication }}
<input-text model="jobApplication.description"></input-text>
</div>
当页面加载时,我可以看到正确的模型(由{{jobApplication}}
输出),但输入字段为空。我需要一个正常的双向绑定。当模型在范围内变化时,它也应该在指令中变化,反之亦然。据我所知,模型是由状态中的resolve回调/函数检索的,所以模板编译时它应该是“there”。
我的问题在哪里?
答
我仔细看过模型后发现问题(感谢评论!)。事实上,我从后台收到的模型只有一个条目。它是这样的:
[{id:"xxx", description:"test".....}]
当然它必须是这样的:
{id:"xxx", description:"test"...}
解决这个愚蠢的错误后,一切正常!
在您的指令作用域定义范围内尝试使用ngModel代替模型范围:{ngModel:'='}' –
您能否将{{jobApplication}}的输出添加到您的问题中? – AWolf
下面是您的代码的精简版本,其中包含我们应该需要的所有内容,但{{jobApplication}}的输出除外。我们需要知道json对象的格式和数据才能够诊断问题。 http://plnkr.co/edit/LA45iEiIh4vBPFyOxrSB?p=info – ps2goat