AngularJS: Directive is not firing or working

Question

new in angular. so just do not understand why the below code and directive is not working. where i made the problem in code.

no item name and price is showing in page.

few questions

what is the meaning of require: 'ngModel', ?

what is controller in directive ?

when controller option fire ?

when people declare controller option in directive ?

share the knowledge please in details ?

Html code:

<div ng-app="myApp">
  <ul ng-controller="MyController">

    <li my-directive price="item.price" ng-repeat="item in products">
        {{item.name}} &mdash; {{item.price}}
    </li>
  </ul>
</div>

Angular Controller:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {

$scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
    },
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
    },
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
    },
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
    },
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
    }
    ]
})

Angular Directive:

myApp.directive('myDirective', function(){
  return {
    scope: { price: '=' },
    require: 'ngModel',
    link : function(scope){
      console.log(scope.price)
      alert('scope price '+scope.price);
    },
    controller: function(scope, element, attrs, ngModel){
      console.log(ngModel.price);
      console.log(scope.price);
      alert('ngModel price '+scope.price);
      alert('scope price '+scope.price);
    },

    template: 'Name: {{item.name}} Address: {{item.price}}'
  }
});

jsfiddle

Here's a funcionat example, you have errors in your parsing jsfiddle.net/r007/wps11eqf example of ng-model(not my fiddle) : jsfiddle.net/mrajcok/6zab5. — r007
– r007, Commented Apr 11, 2016 at 13:13

Thalaivar · Accepted Answer · 2016-04-11 12:48:57Z

1

what is the meaning of require: 'ngModel', ?

When you want to require controller of another directive. Here you are trying to call ngModel directive's controller.

what is controller in directive ? when controller option fire ? when people declare controller option in directive ?

Controller for a directive is defined in one's context, it can be injected in other directive for a inter-directive communication.

Here is a detailed post on the life-cycle execution of a directive, which can help your better. http://odetocode.com/blogs/scott/archive/2014/05/28/compile-pre-and-post-linking-in-angularjs.aspx

There is lots of mistakes in your fiddle you have shared, have corrected some to print the values passed from view to directive to display. https://jsfiddle.net/6am7xd0r/2/

edited Apr 11, 2016 at 12:48

answered Apr 11, 2016 at 12:43

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

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

1 Comment

Monojit Sarkar Over a year ago

good but not clear. after read all goes above of my head. it will be more helpful if some one discuss ngModel or controller use in directive with easy example because i am new in angular.

Collectives™ on Stack Overflow

AngularJS: Directive is not firing or working

few questions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

few questions

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related