Javascript 将ng禁用参数设置为$ionicPopup中的按钮

我试图创建一个$ionicPopup，其中一个按钮在特定条件下被禁用（作为函数的返回值，我们称之为

MyFunction（）

）。为此，我想使用

ng disabled

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

到目前为止我所尝试的：

$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 */
}

// Triggered on a button click, or some other target
$scope.showPopup = function() {

  // Enable/disable "Share" button based on the condition
  $scope.MyFunction = function() {
    return true;
  };

  //custom popup
  var myPopup = $ionicPopup.show({
    templateUrl: "popup-template.html",
    title: "Invite a friend",
    scope: $scope
  });

  // close popup on Cancel button click
  $scope.closePopup = function() {
    myPopup.close();
  };

};

  <button class="button button-dark" ng-click="showPopup()">
      show
    </button>

  <script id="popup-template.html" type="text/ng-template">
    <p>Share button is disabled if condition not satisfied</p>
    <button class="button button-dark" ng-click="closePopup()"> 
      Close
    </button>
    <button class="button button-dark" ng-disabled="MyFunction() == true"> 
      Share
    </button>
  </script>

• 在创建弹出窗口时添加属性，如

  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 */
}

// Triggered on a button click, or some other target
$scope.showPopup = function() {

  // Enable/disable "Share" button based on the condition
  $scope.MyFunction = function() {
    return true;
  };

  //custom popup
  var myPopup = $ionicPopup.show({
    templateUrl: "popup-template.html",
    title: "Invite a friend",
    scope: $scope
  });

  // close popup on Cancel button click
  $scope.closePopup = function() {
    myPopup.close();
  };

};

  <button class="button button-dark" ng-click="showPopup()">
      show
    </button>

  <script id="popup-template.html" type="text/ng-template">
    <p>Share button is disabled if condition not satisfied</p>
    <button class="button button-dark" ng-click="closePopup()"> 
      Close
    </button>
    <button class="button button-dark" ng-disabled="MyFunction() == true"> 
      Share
    </button>
  </script>

---

我认为在ionic v1中，ionic框架团队尚未按照（）实现这一点。我想情况还是一样的。但是有一个解决办法

选项1:

$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 */
}

// Triggered on a button click, or some other target
$scope.showPopup = function() {

  // Enable/disable "Share" button based on the condition
  $scope.MyFunction = function() {
    return true;
  };

  //custom popup
  var myPopup = $ionicPopup.show({
    templateUrl: "popup-template.html",
    title: "Invite a friend",
    scope: $scope
  });

  // close popup on Cancel button click
  $scope.closePopup = function() {
    myPopup.close();
  };

};

  <button class="button button-dark" ng-click="showPopup()">
      show
    </button>

  <script id="popup-template.html" type="text/ng-template">
    <p>Share button is disabled if condition not satisfied</p>
    <button class="button button-dark" ng-click="closePopup()"> 
      Close
    </button>
    <button class="button button-dark" ng-disabled="MyFunction() == true"> 
      Share
    </button>
  </script>

我从您的问题中了解到，您的主要目的是防止用户单击按钮删除ionicPopup按钮并执行一些指示，直到MyFunction（）返回True为止创建您自己的模板，其中包含您可以完全控制的按钮。代码如下：

您可以在onTap中实现这一点：。您可以在此处添加MyFunction（）的条件，如下所示：

JavaScript:

// Triggered on a button click, or some other target
$scope.showPopup = function() { 

  // Enable/disable text"Share" button based on the condition
  $scope.MyFunction = function() {
    return true;
  };

  //custom popup
  var myPopup = $ionicPopup.show({
    templateUrl: 'Share'"popup-template.html",
    typetitle: 'button-round"Invite button-yes'a friend",
    onTapscope: function(e)$scope
 { });

  // close popup on Cancel ifbutton (MyFunctionclick
  $scope.closePopup = function()) {
    myPopup.close();
  };

};

HTML:

HTML:

$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 */
}

// Triggered on a button click, or some other target
$scope.showPopup = function() {

  // Enable/disable "Share" button based on the condition
  $scope.MyFunction = function() {
    return true;
  };

  //custom popup
  var myPopup = $ionicPopup.show({
    templateUrl: "popup-template.html",
    title: "Invite a friend",
    scope: $scope
  });

  // close popup on Cancel button click
  $scope.closePopup = function() {
    myPopup.close();
  };

};

  <button class="button button-dark" ng-click="showPopup()">
      show
    </button>

  <script id="popup-template.html" type="text/ng-template">
    <p>Share button is disabled if condition not satisfied</p>
    <button class="button button-dark" ng-click="closePopup()"> 
      Close
    </button>
    <button class="button button-dark" ng-disabled="MyFunction() == true"> 
      Share
    </button>
  </script>

显示
如果条件不满足，则禁用“共享”按钮

接近
分享

以下是工作代码笔片段：

注意：应用您自己的样式/按钮对齐方式等

我希望它能帮助你。

TL；博士 现场演示：

介绍 你所遇到的问题，是一个真实的问题，显然已经存在多年了

以下是（上次更新于2015年12月）

此模板是您的Ionic-1弹出窗口使用的模板（来自上面链接的代码的第一行）：

var\u第三方物流=
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';

有一行我们特别感兴趣：按钮模板：

<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不好，但尝试使用setTimerI。我尝试过这样做，它给按钮赋予了ng disabled属性，但它没有按我希望的方式工作，即使在$compile（元素）（$scope）之后，它甚至会使按钮消失……我认为这将允许我避免错误情况，但我想做的是实际禁用按钮，这意味着你不能点击它，它具有“禁用”属性和样式。谢谢你的回答。我知道这是可行的，但正如我在问题中所说的，这是一个我想要避免的解决方案，因为我不想重写与Ionic中定义的完全相同的css，我认为这不是一个好的实践。不过，如果这是唯一的解决办法，我想我最终会这么做。我非常感谢你的努力，我认为你的解决办法很有趣，但我不明白投票与礼貌有什么关系。我不满意这种解决方法，因为在这里提问之前，我已经尝试过了。不管怎样，谢谢你的帮助，我感谢你花时间深入研究。非常感谢你的回答，它非常清晰，具有教育意义，你的工作示例令人惊叹。你才是真正的MVP。我试图在实际代码中实现它，但按钮没有显示（我还试图将angular.element（elem.scope（）更改为$scope，因为我有一个ng:areq错误）。如果我对I$compile所在的行进行注释，它将显示该行（当然不是禁用的）。你认为编译部分可能有问题吗？或者可能是MyFunction（）本身，它与$scope.displayppopup（）在同一个控制器中是一个函数？@Driblou：我很高兴你感谢我的回答！实际上，您不能在这里使用

$scope

；它没有引用与弹出窗口使用的完全相同的

$scope

。在，我们看到他们为弹出窗口创建并使用了一个

$new

范围，只是继承了您提供的范围。您提供的范围没有任何

按钮

属性；因此，当您使用没有按钮属性的

$scope

编译按钮（

）时，没有元素。@Driblou:您确实需要有效的作用域。我只是通读了整个源代码，除了

angular.element（elem.scope（）

之外，没有其他方法获得它。离子-1并不完美！您也可以只复制传递到

$scope

中的

按钮

属性，但最终会遇到更深层次的问题。我认为最好找出使用

angular.element（elem）

时出错的原因。。。你能给我一个复制这个问题的项目的链接吗？