Angular не привязывает данные к html напрямую

Я новичок в Angular (версия 1.6.3) и столкнулся с этой проблемой:

у меня есть контроллер под названием prof:

(function () {
    'use strict';

    angular
        .module('app.prof', [])
        .controller('ProfController', ProfController);

    /** @ngInject */
    function ProfController($scope, Data)
    {
        var vm = this;
        vm.documents = Data.documents;
        vm.classes = Data.classes;
    }
})();

Вот его связанный модуль:

(function () {
    'use strict';

    angular
        .module('app.prof')
        .config(config);

    /** @ngInject */
    function config($stateProvider, $translatePartialLoaderProvider, msApiProvider) {
        // State
        $stateProvider
            .state('app.prof', {
                url    : '/prof',
                views  : {
                    'content@app': {
                        templateUrl: 'app/main/prof/prof.html',
                        controller : 'ProfController as vm'
                    }
                },
                resolve : {
                    Data : function(msApi){
                        return msApi.resolve('data@get');
                    }
                }
            });

        $translatePartialLoaderProvider.addPart('app/main/prof');
        msApiProvider.register('data', ['app/data/prof/prof-data.json']);
    }
})();

И вот основная проблема: у меня есть этот html:

<div class="document" ng-repeat="document in vm.documents">
    <ms-card template="'app/custom-directives/prof-card/prof-card.html'"
             ng-model="document"></ms-card>
</div>

он отлично работает, данные правильно привязаны и все такое, но когда я помещаю шаблон, вызываемый непосредственно на страницу, вместо того, чтобы вызывать его через <ms-card>, он больше не работает! я пытался поставить немного console.log() везде, но он всегда говорит, что данные не определены; я не понимаю. Кроме того, ng-repeat всегда работает нормально

Изменить: немного html, который я вызываю:

<md-list-item class="document-item md-white-bg md-2-line" md-ink-ripple>
              <div class="media ml-16">
                <img class="image-apercu" ng-src="{{card.media.image.src}}" alt="{{card.media.image.alt}}" ng-show="card.media.image">
              </div>

PS: когда я добавляю html напрямую, я не забываю поставить ng-model="document", но он все равно не работает

Меня это очень смущает :/


javascript angularjs angularjs-1.6
person Orsu    schedule 31.03.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не можете связать объект "vm" с "$scope". вам нужно связать его с Scope, например

function ProfController($scope, Data)
    {
        //$scope.vm = this;

        $scope.vm.documents = Data.documents;
        $scope.vm.classes = Data.classes;
    }

Ваш HTML должен быть таким:

<body ng-app="app.prof" ng-controller="ProfController">
    <div class="document" ng-repeat="document in vm.documents">
        <ms-card template="'app/custom-directives/prof-card/prof-card.html'"
                 ng-bind="document"></ms-card>
    </div>
</body>

Надеюсь, это сработает для вас

person Faraz    schedule 31.03.2017
comment
если я напишу это напрямую, vm больше не определен? - person Orsu; 31.03.2017
comment
@Orsu Да в ProfController vm больше не определяется - person Faraz; 31.03.2017
comment
извините, мне непонятно: если я напишу, что ваш код vm больше не определен, все развалится - person Orsu; 31.03.2017
comment
о, извините, это должно быть $scope.vm.documents = Data.documents; я забыл $scope с vm - person Faraz; 31.03.2017
comment
оооо да, это было очень запутанным для меня. Тем не менее данные не привязаны, я плохо называю это в html? (я добавил немного кода в вопрос) - person Orsu; 31.03.2017
comment
я только что применил ваши изменения, теперь я получаю Неизвестный провайдер: DataProvider ‹- Data ‹- ProfController - person Orsu; 31.03.2017
comment
Удалите ng-controller из вашего представления - person Faraz; 31.03.2017
comment
stackoverflow.com/questions/30107574 / - person Faraz; 31.03.2017
comment
сделано ! ошибка исчезла, но теперь в моих элементах есть [object Object], как будто данные отображаются неправильно (спасибо, что помогли мне до сих пор) - person Orsu; 31.03.2017
comment
@Orsu, пожалуйста, отметь мой ответ как полезный и проголосуй, если это сработает для тебя. - person Faraz; 31.03.2017
comment
попробуйте ng-bind=document.YourPropertyName - person Faraz; 31.03.2017
comment
например, я добавляю ng-bind='document.PropertyUsed' в каждый элемент, где я использую {{propety}}? - person Orsu; 31.03.2017

arrow_upward
0
arrow_downward

В конце концов я нашел себя - я вернул контроллер, как он был, я переименовал все {{card.something}} в {{document.something}} и удалил ng-bind="" в <div>, которые зацикливались.

person Orsu    schedule 31.03.2017