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

Question

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">

Answer 1

实际上，当您公开 controllerAs 时，您会将“as”部分绑定到范围。

所以 $scope.anything 变成了“as”.anything。

您将控制器公开为

controller: 'TagsHover as tgh',

这意味着您将 $scope/this 绑定到对象 tgh。所以 scope.tag 变成 tgh.tag

你的模板现在应该是

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