CODEWITHSUNDEEP
angularjsangularjs-directive
mtchris
mtchris

Reputation: 79

Angular, directive isolate scope

Still trying to learn Angular

I have a plunker here https://plnkr.co/edit/3FLmBtHP5TuOwWZHBMLK?p=preview

I'm just trying to create an example of a directive with isolate scope.

I'm using $http and a promise to get some dummy json with car details.

I'm trying to display the car details in a directive.

The directive has an isolate scope and I'm trying to pass in 'car'.

I'm using ng-repeat to loop over the json but it's only diaplaying the directive once.

I'm getting a console error saying 'car' is not defined.

(function() {

  angular
    .module('cxoJsApp')
    .directive('simple', function() {

      return {
        restrict: 'E',
        controller: 'simpleController',
        controllerAs: 'simpleCtrl',
        scope: {
          car: '='
        },
        bindtoController: true,
        templateUrl: 'simple.html'

      };

    });

})();

Upvotes: 1

Views: 114

Answers (2)

Sumit Deshpande
Sumit Deshpande

Reputation: 2155

I'am agreeing with jbrown, you are not referencing the correct object. I created sample plunker using your same example to demonstrate the same.

<div class="col-sm-12" ng-controller="simpleController as vm">
    <div ng-repeat="c in vm.myJson.data track by $index">
      <simple car="c"></simple>
    </div>
    {{vm.myJson}}
</div>

Upvotes: 1

jbrown
jbrown

Reputation: 3025

You aren't referencing the right object in your ng-repeat. homeCtrl.myJson should be homeCtrl.myJson.data

<div ng-repeat="c in homeCtrl.myJson.data">

Upvotes: 1

Related Questions