Question

基于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();    
    });
});

模板/视图：

<div class="margin-top-10">
{{ jobApplication }}
    <input-text model="jobApplication.description"></input-text>

</div>

当页面加载时，我可以看到正确的模型（由{{jobApplication}}输出），但输入字段为空。我需要一个正常的双向绑定。当模型在范围内发生变化时，它也应该在指令中改变，反之亦然。据我所知，该模型是由状态中的resolve回调/函数检索的，因此在编译模板时它应该是“there”。

我的问题在哪里？

Answer 1

仔细观察模型后我发现了问题（感谢评论！）。事实上，我从后端收到的模型是一个只有一个条目的集合。它看起来像这样：

[{id:"xxx", description:"test".....}]

当然它必须是这样的：

{id:"xxx", description:"test"...}

在解决了这个愚蠢的错误后，一切正常！

指令中模型的双向绑定不起作用

1 个答案: