Angular directive issue

Question

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>

most of those attributes don't accept {{}} in the expression — charlietfl
– charlietfl, Commented Aug 4, 2015 at 20:55
even if I remove attributes but leave datepicker-popup it still doesn't work and all the way around. — Wild Goat
– Wild Goat, Commented Aug 4, 2015 at 20:57
Did you see this? I think this is the answer for your question: stackoverflow.com/questions/20212813/… — codebear22
– codebear22, Commented Aug 4, 2015 at 21:03

AWolf · Accepted Answer · 2015-08-04 22:15:51Z

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>

Upvoted your answer since you provide way more information than I did.
Thanks. The fiddle took some time to create that's why I was a bit late with my answer. :)

Community · Accepted Answer · 2017-05-23 12:14:02Z

1

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 @.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 4, 2015 at 21:22

yvesmancera

2,9255 gold badges26 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular directive issue

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related