我只想在每次用户单击链接时显示和隐藏微调器,在这种情况下,我使用承诺来包装实际的单击方法,当承诺得到解决时,我想隐藏微调器。
由于某种原因,该指令似乎没有将我在范围内的值与模板中的 ng-class 绑定
有任何想法吗?
app.directive('toogleTextLink', function($compile,$q) {
return {
restrict: 'AE',
scope: { callback: "&targetMethod" },
template: '<div><a style="cursor: pointer" ><b>{{text}}</b></a> <div ng-class="{previewLoader: show}"></div></div>',
link: function (scope, element, attr) {
scope.value = attr.value;
scope.show = false;
scope.$watch('value', function () {
if (scope.value) {
scope.text = "yes";
} else {
scope.text = "no";
}
});
element.bind('click', function () {
scope.show = true;
scope.value = !scope.value;
scope.$apply();
if (scope.callback) {
var deferred = $q.defer();
deferred.resolve(scope.callback());
deferred.promise.then(function () {
scope.show = false;
console.log("then called");
});
}
});
}
};
});
看看plunker