Angular not binding data on html directly

Question

I'm a beginner in Angular (ver 1.6.3) and i ran into this problem:

i have a controller called 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;
    }
})();

Here's its associated module :

(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']);
    }
})();

And here's the main problem : i have this 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>

it works perfectly fine, the data is correctly binded and all, but when i put the template called directly in the page instead of calling it throught a <ms-card> it doesn't work anymore ! i've tried to put some console.log() a little eveywhere but it always says the data isn't defined; i don't get it. Plus, the ng-repeat always works fine

Edit : a bit of the html i call :

<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 : when i add the html directly i don't forget to put the ng-model="document" but it still doesn't work

This is very confusing for me :/

Faraz Babakhel · Accepted Answer · 2017-03-31 08:01:02Z

1

You cannot bind the "vm" object with "$scope". you need to bind it with Scope like

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

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

Your Html Should be like :

<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>

Hope this will work for you

edited Mar 31, 2017 at 8:01

answered Mar 31, 2017 at 7:37

Faraz Babakhel

6645 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Orsu Over a year ago

if i write this directly vm isn't defined anymore ?

Faraz Babakhel Over a year ago

@Orsu Yes within ProfController vm isn't defined anymore

Faraz Babakhel Over a year ago

ohh Sorry this should be $scope.vm.documents = Data.documents; i forget $scope with vm

Faraz Babakhel Over a year ago

Remove ng-controller from your View

Faraz Babakhel Over a year ago

stackoverflow.com/questions/30107574/…

|

Orsu · Accepted Answer · 2017-03-31 08:57:34Z

0

In the end i found myself - I put the controller back like it was, i renamed all the {{card.something}} as {{document.something}} and i removed the ng-bind="" in the <div> that was being looped.

answered Mar 31, 2017 at 8:57

Orsu

4277 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular not binding data on html directly

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related