DirectSync Controller Definition

Question

In the AngularJS directive, I realized that there are two ways to define a controller. A controller can be defined as part of a directive definition using the controller: option. Alternatively, the templateURL:'someview.html' directive templateURL:'someview.html' may contain the desired controller. Can someone explain what the differences are between these two parameters and which one to use when?

inside directive:

 app.directive('myDirective', function() { templateUrl: 'someview.html, controller: 'MyController' ----> either here }); 

someview.html

 <div ng-contoller='my-controller'> ----> or here </div> 

Answer 1

If the directive will break without a controller, then the directive should determine the required controller. This creates a one-to-one relationship between the directive and the controller.

Suppose we have a Booking directive that needs a BookingController. It is redundant for developers to define both the directive and the controller every time they need to use the reservation directive. Therefore, the directive can define the controller: "BookingController" , and AngularJS will automatically create an instance of this controller when the directive is used.

What if your directive is generic? You have a directive that only processes the formatting of a booking order, but there are many controllers that handle different types of orders. In this case, the directive will not define the controller. It will only determine what it needs "book_number" in the current area. The developer will have to "use" this directive somewhere in the DOM "under" the controller that processes the reservation.

It is best to think of directives as code that publishes the current scope but does not manipulate the current scope. Controllers are code that controls the current scope but does not know how the scope is published. Views (or HTML) are where these two things relate to each other depending on dependencies.

Answer 2

Make sure you put quotation marks ( " or ' ) around the controller name if you defined an external controller directive, otherwise it will show an error

Wrong:

 controller: MyController 

Right:

 controller: 'MyController' 

It matters a lot; in the second case, the controller will be introduced in Bootstrap.

Answer 3

An important difference when providing the controller key of a directive is that the controller for this directive may be require d other directives to use. For example, here is a snippet of two directives at the bottom of the AngularJS main page :

 app.directive('tabs', function() { return { // ... controller: function($scope, $element) { this.addPane = function() { // ... }; }, // ... }; }); app.directive('tab', function() { return { // ... // require the controller from the `tabs` directive // on a parent element require '^tabs', // required controller passed as fourth parameter link: function(scope, elem, attrs, tabsController) { tabsController.addPane(...); } }; }); 

 <tabs> <tab>...</tab> <tab>...</tab> </tabs>