0

我只想在每次用户单击链接时显示和隐藏微调器,在这种情况下,我使用承诺来包装实际的单击方法,当承诺得到解决时,我想隐藏微调器。

由于某种原因,该指令似乎没有将我在范围内的值与模板中的 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

4

1 回答 1

0

问题接缝了微调器(CSS)的大小,而且您正在立即解决承诺,因此您将无法看到微调器。

检查这些更改 http://plnkr.co/edit/viwzCb?p=preview

于 2013-11-06T06:33:03.003 回答