Javascript 角度js错误：[$compile:ctreq]控制器xxxx，指令yyyy要求，can'；找不到

关于这个错误，我已经在stackoverflow上讨论了多个主题，但在我的上下文中，我总是不理解这个问题

我有这个模板：

<div class="progress">
<div class="progress-bar"
     data-toggle="tooltip"
     title="Parts offertes : {{ '{{ gift.gived_parts}}' }} / {{ '{{ gift.number_of_parts }}' }}"
     data-bar="gived"
     >
    <span ng-class="{true:'op7', false:''}[gift.percent_done > 0 && gift.percent_done < 20]">
        {{ '{{ gift.gived_parts}}' }}
    </span>
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped progress-bar-animate active op7"
     data-toggle="tooltip" 
     title="Parts réservées&nbsp;:&nbsp;{{ '{{ gift.total_reserved}}' }}&nbsp;/&nbsp;{{ '{{ gift.number_of_parts }}' }}"
     data-bar="reserved">
</div>

app.directive('progressBarD', function() {
return {
    restrict: 'E',
    templateUrl: rootUrl + '/directive/progressBar',
    scope: {
        gift: '=gift'
    },
    link: function ($scope, $elem, attrs) {
        var bars = $elem.find(".progress-bar");
        bars.each(function() {
            var bar = $(this);
            var percent = (bar.context.dataset.bar === "gived")
                ? $scope.gift.percent_done
                : $scope.gift.percent_reserved;

            if (($().appear) && isMobileDevice === false && (bars.hasClass("no-anim") === false) ) {
                bar.appear(function () {
                    bar.addClass("progress-bar-animate").css("width", percent + "%");
                }, {accY: -150} );
            } else {
                bar.css("width", percent + "%");
            }
        });
    }
};
});

<progress-bar-d gift="gift"></progress-bar-d>

下面是指令的调用：

<div class="progress">
<div class="progress-bar"
     data-toggle="tooltip"
     title="Parts offertes : {{ '{{ gift.gived_parts}}' }} / {{ '{{ gift.number_of_parts }}' }}"
     data-bar="gived"
     >
    <span ng-class="{true:'op7', false:''}[gift.percent_done > 0 && gift.percent_done < 20]">
        {{ '{{ gift.gived_parts}}' }}
    </span>
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped progress-bar-animate active op7"
     data-toggle="tooltip" 
     title="Parts réservées&nbsp;:&nbsp;{{ '{{ gift.total_reserved}}' }}&nbsp;/&nbsp;{{ '{{ gift.number_of_parts }}' }}"
     data-bar="reserved">
</div>

app.directive('progressBarD', function() {
return {
    restrict: 'E',
    templateUrl: rootUrl + '/directive/progressBar',
    scope: {
        gift: '=gift'
    },
    link: function ($scope, $elem, attrs) {
        var bars = $elem.find(".progress-bar");
        bars.each(function() {
            var bar = $(this);
            var percent = (bar.context.dataset.bar === "gived")
                ? $scope.gift.percent_done
                : $scope.gift.percent_reserved;

            if (($().appear) && isMobileDevice === false && (bars.hasClass("no-anim") === false) ) {
                bar.appear(function () {
                    bar.addClass("progress-bar-animate").css("width", percent + "%");
                }, {accY: -150} );
            } else {
                bar.css("width", percent + "%");
            }
        });
    }
};
});

<progress-bar-d gift="gift"></progress-bar-d>

在屏幕上，link函数看起来很有效，但最后，当gift.percent_done时，第一个函数内部的值不同于0

---

你能解释一下为什么我有这个角度误差吗？删除span是否存在相同的问题？

最后我发现了问题

在anguluar指令中，我更改了bar.context.dataset.bar，它就可以工作了。 我不知道为什么解释得不好，但现在它起作用了