CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
cyber_ua
cyber_ua

Reputation: 177

How do i can run directive function before controller?

I need call directive function ( i need scope ) before controller.

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

app.controller('Controller', ['$scope',  function($scope ) {
  $scope.changeDerictive();
}]);

app.directive('ngMyDer', function() {
  return {
    restrict: 'A',
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) {
          scope.changeDerictive = function() {

            console.log("changed");
          };
        }
      }
    }
  }
});

http://plnkr.co/edit/NWb23rScg8zvPluGBWH5?p=preview

Upvotes: 2

Views: 1588

Answers (4)

Jony-Y
Jony-Y

Reputation: 1579

as requested this is the example with ui-router. first we will define a controller for the base of the app.

<body ng-app="myApp" ng-controller="AppBaseCtrl">
    <main role="main">
        <overlay-spinner></overlay-spinner>
        <invite-success></invite-success>
        <div ui-view></div>
    </main>
</body>

now in the ui router we will define our base route:

.config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/desiredRoute');
        $stateProvider
            .state('desiredRoute', {
                url: '/desiredRoute',
                templateUrl: 'views/pathToTemplate.html',
                controller: 'MyViewCtrl'
            })
});

so what will happen? the base controller runs, we can initialize desired scope variables, then we run the directives and then we run our required controller.

so you have the directive which runs before the needed controller.

if we want this to be cleaner with ui-router we can define the routes like this:

in the routes config:

  .state('dashboard', {
        url: '/dashboard',
        templateUrl: 'views/templates/dashboard/dashboard-base.html',
        controller: 'DashboardBaseCtrl',
        abstract: true
    })
    .state('dashboard.main', {
        url: '/main',
        templateUrl: 'views/templates/dashboard/dashboard-main.html',
        controller: 'DashboardMainCtrl'
    })

then in the view for the dashboard-base:

<div myDirective></div>
<div ui-view></div>

and of course define in the base controller what ever you want and as you can see... base controller runs then directive then our desired controller so directive runs before the controller...

EDIT

I have created a small plunker like you asked... you will see here that with no timeout the directive is called before our main controller does using a base controller my example is the first example in the answer

plunker with answer

Upvotes: 3

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

There is a priority between angularjs directives.ng-controller is directive too,try that priority.Maybe it can help you.

Upvotes: 1

cyber_ua
cyber_ua

Reputation: 177

Thanks for answers. I did it this way

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

app.controller( "Ctrl",[ "$scope", function ( $scope ) {

   $scope.$watch ( "ngExchange", function ( ) {
     $scope._ngExchange[0].remove()
     $scope._ngExchange[1].after( $scope._ngExchange[0] );

   } );


} ] );

app.directive('ngExchange', function(){
    return {
      restrict: 'A',
      controller: function ( $scope, $element, $attrs ) {

        if ( $scope._ngExchange === undefined ) {
          $scope._ngExchange = [];
        }

        $scope._ngExchange.push( $element );


      }
    }

});

http://plnkr.co/edit/fagINqNafPp6vEhawNbl?p=preview

Upvotes: 0

Shubham Nigam
Shubham Nigam

Reputation: 3954

Your ng-controller is written before your directive ,so if you want to call directive frist write ng-controller after your directive like this

  <body ng-app="docsRestrictDirective">
      <div ></div>
       <div  ng-my-der></div>
    <div ng-controller="Controller"></div>
    </body>

Then it will show result according to you

Plunker: http://plnkr.co/edit/0qccTyPADwDaq05KKmao?p=preview

Upvotes: 1

Related Questions