CODEWITHSUNDEEP
angularjsangular-directive
Wild Goat
Wild Goat

Reputation: 3579

Angular directive issue

For few days I was trying to debug why my directive doesn't work. No event has been fired when I press a button. Finally I found which line breaks everything!

Inside template html I have line datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}" if I remove it everything works well. But it is essential part in my custom directive and I want to keep it. I assume problem is that I am using directive inside custom directive?

Could you please help me to identify problem and find a correct solution?

Thanks for any help!

Directive:

(function(){

    function directive(){
        return {
            scope :{
                model:'=model',
                minDate:'=minDate',
                isOpened:'=isOpened'
            },
            restrict: 'E',
            templateUrl: 'templates/datepicker/datepicker.html',
            controller: 'Ctrl'
        };
    };

    app.directive('myDirective', directive);

})();

controller:

(function(){

    function Controller($scope) {
        $scope.open = function() {
            alert('HELLO');
        };
    app.controller('Ctrl', Controller);

})();

template html:

<fieldset>
    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup ng-model="{{model}}" min-date="{{minDate}}" is-open="{{isOpened}}" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click="open()" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>

Upvotes: 2

Views: 503

Answers (2)

AWolf
AWolf

Reputation: 8980

As mentioned in the other answer, you don't need the curly braces in your template because it's a two way binding.

The problem with your click function is probably the isolated scope of your custom directive. If you'd like to have the open method in your main controller you could pass it to the isolated scope.

Please find below a demo of your directive or here at jsfiddle.

angular.module('demoApp', ['ui.bootstrap'])
    .controller('mainController', Controller)
    .directive('customDir', Directive);

function Directive() {
    return {
        scope: {
            model: '=',
            minDate: '=',
            isOpened: '='
        },
        transclude: true,
        restrict: 'E',
        templateUrl: 'templates/datepicker/datepicker.html',
        //controller: 'Ctrl'
        controller: function($scope) {
            $scope.open = function() {
                console.log('open popup now!!');
                $scope.isOpened = true;
            };
        }
    };
}

function Controller($scope) {
    $scope.open = function () {
        alert('HELLO'); // not called becasue of isolated scope of custom directive
    };
    $scope.dateModel = {
        date: new Date(),
        min: new Date()
    };
    $scope.isOpened = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="demoApp" ng-controller="mainController">
    <script type="text/ng-template" id="templates/datepicker/datepicker.html">
        <fieldset>
    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup="" ng-model="model" min-date="minDate" is-open="isOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click="open()" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>
    </script>
    
    <custom-dir model="dateModel.date" min-date="dateModel.min" is-opened="isOpened"></custom-dir>
</div>

Upvotes: 2

yvesmancera
yvesmancera

Reputation: 2925

When you define your directive's scope properties with a = symbol, you don't need to use {{}} in your views.

Remove the {{}} from your view:

<input type="text" class="form-control" datepicker-popup ng-model="model" min-date="minDate" is-open="isOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />

Here's more info regarding directive's scope properties using =, & and @.

Upvotes: 1

Related Questions