CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-modelangularjs-ng-show
Leon Gaban
Leon Gaban

Reputation: 39044

After upgrading to 1.4, my directive tag model doesn't work anymore

Recently we upgraded to 1.4 and now I'm having a problem with the way this hover directive works.

Previously working code:

angular
    .module('tagHoverDirective', []).controller('TagsHover', TagsHover)
    .directive('tagsHover', directive);

function directive () {
    var directive = {
        templateUrl : "popovers/tagsPopovers/tagsHover.html",
        restrict: "E",
        replace: true,
        bindToController: true,
        controller: TagsHover
        link: link,
        scope: {
            tag:'=ngModel'
        }
    };
    return directive;
    function link(scope, element, attrs) {}
}

TagsHover.$inject = [
    '$scope',
    '$timeout'];

function TagsHover(
    $scope,
    $timeout) {
    ....

Now 1.4 forces us to use the Controller as syntax, I had to change up the function directive () part to this:

function directive () {
    var directive = {
        templateUrl : "popovers/tagsPopovers/tagsHover.html",
        restrict: "E",
        replace: true,
        bindToController: true,
        controller: 'TagsHover as tgh',
        link: link,
        scope: {
            tag:'=ngModel'
        }
    };
    return directive;
    function link(scope, element, attrs) {}
}

Now the ng-show in the markup no longer works, but how do I fix it? I'm not using tgh or this, I'm actually using the tag object that is getting passed into this directive to set the visibility.

<div class="tags-hover-container" ng-show="tag.tagsHoverDisplay">

Upvotes: 0

Views: 386

Answers (1)

Milos Mosovsky
Milos Mosovsky

Reputation: 2993

Actually when you expose controllerAs you are binding "as" part to scope.

So $scope.anything becomes "as".anything.

You are exposing controller as 

controller: 'TagsHover as tgh',

that means you are binding $scope/this to object tgh. So scope.tag becomes tgh.tag

Your template now should be 

<div class="tags-hover-container" ng-show="tgh.tag.tagsHoverDisplay">

Upvotes: 2

Related Questions