CODEWITHSUNDEEP
angularjs
mm1975
mm1975

Reputation: 1655

Pass a value from a controller to directive

I want to pass a value from my controller to my directive´s template. The output of the first span should also be viewed in the second span.

Here my code (simplified):

HTML

<div id="queryBuilder" class="queryBuilder" ng-hide="builder">
    <!--origin output-->
    <span class="output1" ng-model="output"></span >
</div>
<script type="text/ng-template" id="/queryBuilderDirective.html">
     <!--second output-->
    <span class="output2" ng-bind="output"></span >
</script>

JS

var app = angular.module('app', ['ui.bootstrap']);
app.controller('QueryBuilderCtrl', ['$scope', '$http', '$interval',
function($scope) {    

    $scope.output = 'test';

}]);
var queryBuilder = angular.module('queryBuilder', []);
queryBuilder.directive('queryBuilder', ['$compile',  
function($compile, $scope) {
    return {
        restrict : 'E',
        scope : {
            output : '=',
        },
        templateUrl : '/queryBuilderDirective.html'
     };       
}]);

Also a non-working jsfiddle

Upvotes: 0

Views: 303

Answers (4)

Ali
Ali

Reputation: 1085

HTML

<div id="queryBuilder" class="queryBuilder" ng-hide="builder">
    <!--origin output--> 
    <span class="output1" ng-bind="output"></span >
    <query-builder output="output"></query-builder>
</div>

<script type="text/ng-template" id="/queryBuilderDirective.html">
      <!--second output-->
    <span class="output2" ng-bind="output"></span >
</script>

JS

var app = angular.module('app', ['queryBuilder']);
app.controller('QueryBuilderCtrl', ['$scope', '$http', '$interval',

function ($scope) {

    $scope.output = 'test';

}]);

var queryBuilder = angular.module('queryBuilder', []);
queryBuilder.directive('queryBuilder', ['$compile',

function ($compile, $scope) {
    return {
        restrict: 'E',
        scope: {
            output: '=',
        },
        templateUrl: '/queryBuilderDirective.html'
    };
}]);

jsfiddle

Upvotes: 0

Thomas Weglinski
Thomas Weglinski

Reputation: 1094

Your code has several problems, the main ones:

  1. Your directive restrict is 'E' which stands for element, but you do not have appropriate tag in your html code. It should be <query-builder></query-builder>
  2. You cannot inject services like this: ['$scope', '$http', '$interval', function($scope) { .... } ]. The number of variables should match the number of injecting services. Please refer for example to: https://stackoverflow.com/a/30952413/3076403 and AngularJS documentation: https://docs.angularjs.org/guide/di

Nevertheless, the working directive should look like this:

app.directive('queryBuilder', function () {
    return {
        restrict: 'E',
        scope: {
            output: '='
        },
        templateUrl : '/queryBuilderDirective.html'
    };
});

Note: Make sure that your directive is pointing to valid html file queryBuilderDirective.html. In this file you can have:

<span class="output2">{{output}}</span>

The invocation in your "main" html controlled by QueryBuilderCtrl:

<query-builder output="{{output}}"></query-builder>

Upvotes: 1

outoftime
outoftime

Reputation: 765

If your fiddle code describe problem, than you need to use service.

If your controller manage one piece of responsibility and you want to access data from it in other piece that you have to use service as single access point to required data.

If you want to use controller from other module in directive, just inject dependent module and you will be able to use his controllers.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to use directive in module not in controller.

So, replace this:

queryBuilder.directive('queryBuilder',

with this:

app.directive('queryBuilder',

Also, I couldn't see output attribute in your directive. The scope binding need to attach attributes of elements.

If you wish to use output from the controller then use scope.output in your directive.

Upvotes: 0

Related Questions