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, Aug 04 '15 at 20:55
even if I remove attributes but leave `datepicker-popup` it still doesn't work and all the way around. — Wild Goat, Aug 04 '15 at 20:57
create a demo in [plunker](http://plnkr.co/edit/?p=catalogue) — charlietfl, Aug 04 '15 at 20:58
Did you see this? I think this is the answer for your question: http://stackoverflow.com/questions/20212813/ui-bootstrap-datepicker-is-open-not-working-in-modal — napstercake, Aug 04 '15 at 21:03

score 2 · Accepted Answer · answered Aug 04 '15 at 22:15

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. — yvesmancera, Aug 04 '15 at 22:25
Thanks. The fiddle took some time to create that's why I was a bit late with my answer. :) — AWolf, Aug 04 '15 at 22:45

score 1 · Answer 2 · edited May 23 '17 at 12:14

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

Angular directive issue

2 Answers2