How to use Directive templateUrl with external controller?

Asked

Viewed 1,915 times

1

I am decommissioning some components and I am in doubt when creating a controller linked to the template.

I have for example the Login screen, in my Directive do:

app.directive('appLogin',function(){
  return{
    scope: {},
    restrict:'E',
    templateUrl:'view/usuario/login.html',
    controller: ['$scope', function($scope) {
      console.log($scope.login);
    }],
  };
});

This way I can take all the values of the login screen and perform some action, I would like to perform a separation to leave so:

app.directive('appLogin',function(){
  return{
    scope: {},
    restrict:'E',
    templateUrl:'view/usuario/login.html',
    controller: 'controller/usuario/login.js'
  };
});

This way I would include only one init.js file in index.html and it would load all the modules and controllers I need.

What am I doing wrong? Is this the right way to perform angular modularization? I am separating 1 file for Controller and one for View.

angularjs angularjs-directives

2 answers

2


Although Thavia’s solution might work, it will depend on its use. I particularly don’t like to use controller explicitly defined in directive, or if you want controller with directive, because it loses some of its purpose, create behavior independent of other areas, but, each case is a case.

But in your code the problem is the definition of controller. You’re referencing the physical file JS and not the controller proper.

app.directive('appLogin',function(){
  return{
    scope: {},
    restrict:'E',
    templateUrl:'view/usuario/login.html',
    controller: 'NomeController',
    controllerAs: 'vm' //!Important! Utilize este apenas se você utilizar controllerAs syntax no seu projeto, se não utilize apenas a opção de cima
  };
});

See the definition of controller, you must reference the name of your controller. Just make sure it is inside the same module, or an already loaded module so you can use it.

  • I’m doing this, just adding the controller name, but it would be nice if it could include the file controller on demand

  • 2

    The problem with this is that, for example, when using a file . min there would be many other controllers. What you can do is include the module via require or other service. I particularly use $ocLazyLoad that works great with ui-router, so I can load modules along the navigation and use as needed.

1

You can inject controllers into your directive and then use angular.extend to bring $Scope to your directive, for example: 

app.controller('ctrlB', function($scope) {

  $scope.bar = 'foo';

});


app.directive('appLogin', function() {
  return {
    scope: {},
    restrict: 'E',
    templateUrl:'view/usuario/login.html',
    controller: ['$scope','$controller', function($scope, $controller)     {


      angular.extend(this, $controller('ctrlB', { $scope: $scope }));
      console.log($scope.bar); // foo



    }]
  };
});

Browser other questions tagged angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.