Угловые не обязательные данные по html напрямую

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

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

(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" но это все еще не работает

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

Источник

2 ответа

Решение

Вы не можете связать объект "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>

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

Источник

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

Источник
Другие вопросы по тегам