javascript - 将ng-disabled参数设置为$ ionicPopup中的button

Question

我试图创建一个$ ionicPopup，其中在某些情况下(其中一个函数的返回值，我们称它为MyFunction())禁用了按钮之一。我想为此使用ng-disabled。

问题是，我不知道如何以编程方式添加属性“ng-disabled”。

我到目前为止所做的尝试:

在创建弹出窗口时添加属性，例如attr:"ng-disabled='myFunction()'"

使用JavaScript =>在创建弹出窗口后添加属性，问题是在实际显示弹出窗口之前执行setAttribute()方法，因此我需要一种方法来检测何时打开弹出窗口，然后仅执行该方法。

在弹出模板中将按钮创建为html元素，而不使用$ionicPopup.show()方法设置任何按钮。 可以，但是我对并不满意，因为我不想“重新发明轮子”并为Ionic框架已经涵盖的按钮重新定义CSS样式。

我的JS函数:

$scope.displayPopUp=function(){
    var alertPopup = $ionicPopup.show({
        templateUrl: 'sharePopUp.html',
        title: 'Invite a friend',
        cssClass: 'popupShare',
        buttons:[
            {
                text:'Close',
                type: 'button-round button-no',
                onTap: function(){
                        /* Some instructions here */
                    }
            },
            { /* v THIS IS THE BUTTON I WANT TO DISABLE UNDER CERTAIN CONDITIONS v */
                text:'Share',
                type: 'button-round button-yes',
                onTap: function(){
                       /* Some instructions here */
                    }
            }
        ]
    }); 

    $(".button-yes")[0].setAttribute("ng-disabled", "MyFunction()"); /* NOT WORKING BECAUSE button-yes IS NOT EXISTING YET */
}

Answer 1

TL; DR

$timeout(function () {                              // wait 'till the button exists
  const elem = $('.button-yes')[0];
  elem.setAttribute('ng-disabled', 'MyFunction()'); // set the attribute
  $compile(elem)(angular.element(elem).scope());    // Angular-ify the new attribute
});

现场演示: working plunk
介绍
您遇到的这个问题是一个真实的问题，而且显然已经存在了很多年。
这是 the latest version of the code used by $ionicPopup (最后更新时间为2015年12月)
此模板是您的Ionic-1弹出窗口使用的模板(来自上面链接的代码的第一行):

var POPUP_TPL =
  '<div class="popup-container" ng-class="cssClass">' +
    '<div class="popup">' +
      '<div class="popup-head">' +
        '<h3 class="popup-title" ng-bind-html="title"></h3>' +
        '<h5 class="popup-sub-title" ng-bind-html="subTitle" ng-if="subTitle"></h5>' +
      '</div>' +
      '<div class="popup-body">' +
      '</div>' +
      '<div class="popup-buttons" ng-show="buttons.length">' +
        '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>' +
      '</div>' +
    '</div>' +
  '</div>';

我们特别感兴趣的一行是:按钮模板:

<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>

如您所见，只有 而不是内置的方式来更改其按钮的属性。
两种方法
从这里开始，您有两个修复:

我们可以为他们在GitHub上的项目做出贡献，实现缺少的功能，为其编写测试，记录该文档，提交问题，请求请求，要求发布较新版本并使用较新版本。

这是理想的解决方案，因为它可以永久解决 所有人的问题 永远。虽然，这确实需要一些时间。也许我会做。不过您可以自己动手做，并标记我，我会+1您的PR +1

写一段肮脏的代码，用猴子在您的特定情况下修补您的特定问题

这并不理想，但是现在可以在 上正常工作。
我将探索并扩展下面的(快速'n脏) 选项＃2 。
解决方法
到目前为止，您已经尝试了3件事:

第一个根本不是一回事(尽管如果我们实现，测试，记录并发布它，则可能是这样)

第三个是难以维护的(如您所知)

您剩下的第二件事就是我们:

Adding the attribute after the popup was created, using JavaScript

The problem is that the setAttribute() method is executed before the popup is actually shown, so I would need a way to detect when the popup is open, and execute the method only then.

您是对的，但这只是双重问题的一部分。
第1部分:尚未创建按钮
实际上，可以在显示弹出窗口时将对 setAttribute的调用延迟到以后。您不会希望将其延迟到比人类可以察觉的更长的时间，因此您不能合理地花费超过20ms的时间。
当弹出窗口准备好时，会有一些回调，我们可以使用，但是没有。
无论如何，我只是在逗你:JavaScript的“多任务处理”在这里起作用，您可以将其延迟 0毫秒! 😎
从本质上讲，它与JS将其要做的事情排队的方式有关。将一段代码的执行延迟0ms，将其放在要立即完成的事情队列的末尾。
只需使用:

setTimeout(function () {
  $(".button-yes")[0].setAttribute("ng-disabled", "MyFunction()");
}, 0); // <-- 0, that's right

一切就绪!
好吧，您确实有一个按钮，其 ng-disabled属性确实是 "MyFunction()"。但是它什么也没做...
到目前为止，您只拥有一个HTML元素，该元素的属性对简单的HTML按钮没有任何作用:Angular尚未将其陷入新的DOM中并陷入了困境。
第2部分:Angular不了解新属性
关于这一点，这里有很多可供阅读的内容，但归结为以下几点:Angular需要 编译您的DOM元素，以便它根据您特定于Angular的属性来设置事物。
Angular根本没有意识到您的按钮有一个新属性，或者甚至应该关注它。
要告诉Angular重新编译您的组件，请使用(方便命名) $compile服务。
它将需要元素进行编译，以及需要使用Angular $scope进行编译的元素(例如，您的 MyFunction中可能不存在 $rootScope)。
一次即可使用 ，如下所示:

$compile(/* the button */ elem)(/* the scope */ scope);

假设以下元素是您的按钮:

const elem = $(".button-yes")[0];

...您可以通过它对应的Angular装饰元素获得实际的作用域:

const scope = angular.element(elem).scope();

因此，基本上:

const elem = $('.button-yes')[0];
elem.setAttribute('ng-disabled', 'MyFunction()');
$compile(elem)(angular.element(elem).scope());

ada!而已! 🎉
... 有点。直到有一些用户交互会改变相应的$scope为止，该按钮实际上才显示出来。
奖励部分:避免使用$scope.$apply()或$scope.$digest()Angular实际上并不是在神奇地捡起变化的东西并将其冒泡到正确的地方。有时，需要明确告知它环顾四周，看看元素是否与其$scope同步。
好吧，更具体地说，异​​步发生的任何更改本身不会被接受:通常，我在谈论的是AJAX调用和setTimeout延迟的函数。告诉Angular同步作用域和元素的方法是$scope.$apply和$scope.$digest ...，我们应该在避免它们方面取得成功:)
再次，有很多关于此的阅读。同时，有一个Angular服务(再次)，它可以(从概念上讲，不是文字实现)将您的所有异步代码包装成$scope.$apply() －我在谈论$timeout。
当您更改将更改DOM的内容时，请使用$timeout而不是setTimeout!
总结一下:

$timeout(function () {                              // wait 'till the button exists
  const elem = $('.button-yes')[0];
  elem.setAttribute('ng-disabled', 'MyFunction()'); // set the attribute
  $compile(elem)(angular.element(elem).scope());    // Angular-ify the new attribute
});

现场演示:working plunk