Angular: regarding passing scope data to directives

Question

I am fairly new to Angular and still learning. I posted a question regarding how to pass scope data to directives. Two nice people answered my question but the explanations were very short, so I do not understand some of the code in two of the answers. I will post the two answers and accompanying code here, and if possible someone with be able to answer my questions.

1st set of Code

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

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

point 1

Why is scope declared in the directive ? Regarding 'isolated scope' property name has to be price, is there a reason for the variable name here? Can we give it a different name ?

point 2

I am new to ng. This is the first time I've noticed a 'controller declared in directive'. When and why do people declare a controller in a directive? Mostly we declare a controller outside of a directive. Are a controller function and a controller inside a directive both the same, or different?

point 3

What is the meaning of require: 'ngModel', ? If we do not write require: `ngModel what will fail to work?

2nd set of Code

angular.module('myApp')
.directive('myDirective', function () {
    return {
        transclude: true,
        restrict: 'AEC',
        scope: {
            name: '=',
            price: '='
        },
        templateUrl: 'my-directive.html',
        link: function (scope, element, attr) {
            }
        }
    }
});

<li my-directive ng-repeat="item in products" price="item.price" name = "item.name"></li>

points 1

What is transclude: true ? What is the meaning of transclude = true or false? In what kind of situation do people work using transclude: true or false?

points 2

Where I have to put file my-directive.html in folder, what would be the location of the file?

Will Angular load this template file automatically?

There is a guide for that, in the officiel documentation. Read it. https://docs.angularjs.org/guide/directive — JB Nizet, Apr 09 '16 at 10:51
i must see the link but if foten found explanation in angular doc is bit harder for those people who new in angular. so my request please answer my point wise. thanks — Mou, Apr 09 '16 at 10:56
another issue i should not get negative for my valid question where i show those area which is not clear. — Mou, Apr 09 '16 at 10:57
Read the [Comprehensive Directive API Reference](https://docs.angularjs.org/api/ng/service/$compile#comprehensive-directive-api). — georgeawg, Apr 09 '16 at 12:54

score 2 · Answer 1 · edited May 23 '17 at 10:28

1st set

Point 1: why scope declared in directive ? isolated scope property name has to be price ? here can we give different name ?

Ans: scope is declared in directive so that each instance of directive will have their own scope independent of each other. No it need not be price, it can be any variable name as per your choice. It's a general practice to use variable names in context of directive's usage.

Point 2: i am new in ng. this is first time i notice controller declared in directive. why and when people declare controller in directive ? mostly we declare controller out side of directive. controller function and controller inside in directive both are same or different?

Ans: This controller is the controller of your directive and is different than what you normally see for a module.

Point 3: what is meaning of require: 'ngModel', ? if we do not write require: `ngModel then what will not work?

Ans: When using your directive, it forces it to be used along with the attribute/controller ng-model. You can refer this answer for more details.

2nd set

Point1: what is transclude: true ? what is the meaning of transclude = true or false? in what kind of situation people work with transclude: true or false?

Ans:It's setting transclude as true. As per documentation:

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

transclude: true allows us to wrap a users template with our template. I've used it as true in a directive I wrote where if a table is empty, I show a error message showing No Data Available. In my case, table will not by displayed at all, instead this directive's template is displayed.

Points 2: where i have to put the file my-directive.html in folder. what would be the location of the file? angular will load this template file automatically?

Ans: You can place this template anywhere in the project folder. Like, in a folder named views or templates. As long as you provide correct path in templateUrl, angular will find the file and use it in the directive.