AngularJS：指令未触发或不起作用

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

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