Javascript 在控制器中传递html字符串并放入.html（angular js）

我有个问题。按我需要的键“关”或“开”。若json中的活动状态为1，那个么按钮off将在html中显示，所以取而代之。但我已经试过了

ng绑定html

还是不行，有什么解决办法吗？谢谢

这是我的代码：

控制器

if(item.active === 1){
    html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';

}else{
   console.log(1);
    html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}

$scope.getButtonOnOff = function(html_button) {

    return $sce.trustAsHtml(html_button);

};

if（item.active==1）{
html_按钮='On'；
}否则{
控制台日志（1）；
html_按钮='关闭'；
}
$scope.getButtonOff=函数（html_按钮）{
返回$sce.trustAsHtml（html_按钮）；
};

Html

<span ng-if="data.active === 1">
            <button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
            <button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
        </span>
        <span ng-if="data.active === 0">
            <button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
            <button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
        </span>

关
在…上
在…上
关

让我们试试角度的方法

<td width="20%">
        <button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
        <button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
        <button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

编辑
在…上
关

让我们试试角度的方法

<td width="20%">
        <button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
        <button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
        <button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

编辑
在…上
关

仔细查看您的html，可以发现，实际上，您在“活动”和“非活动”按钮之间有90%的共享代码，而这种更改是由您绑定到的对象的状态驱动的。你真的认为重写完整的按钮代码并绑定到html是最好的选择吗？除了写出html并在文本css类中进行更改之外，您还可以生成一个接受状态的指令，该指令可以在整个应用程序中重用。这里绝对没有必要使用

ng bind html

有什么特别的原因不能用它来代替吗？仔细看看你的html，你会发现你实际上在活动和非活动按钮之间有90%的共享代码，而这个变化是由你绑定到的对象的状态驱动的。你真的认为重写完整的按钮代码并绑定到html是最好的选择吗？除了写出html并在文本css类中进行更改之外，您还可以生成一个接受状态的指令，该指令可以在整个应用程序中重用。这里绝对没有必要使用

ng bind html

有什么特别的原因不能使用它吗？我同意这是一个更好的解决方案。如果不想让节点在不活动时填充DOM，也可以使用该指令。如果使用单元素use

ngIf

指令，并且如果要在两个或多个元素之间切换，请使用

ngShow

和

ngHide

为了使

DOM

不被破坏，当我们添加自定义指令时，我们将得到问题show“item.active”可以读取我的代码，如果item.active==1或item.active==0？如果

item.active==1

则显示按钮

开

，隐藏按钮

关

，当

item.active==0

按钮

on

隐藏和

off

将显示时，我同意这是一个更好的解决方案。如果不想让节点在不活动时填充DOM，也可以使用该指令。如果使用单元素use

ngIf

指令，并且如果要在两个或多个元素之间切换，请使用

ngShow

和

ngHide

为了使

DOM

不被破坏，当我们添加自定义指令时，我们将得到问题show“item.active”可以读取我的代码，如果item.active==1或item.active==0？如果

item.active==1

则显示按钮

开

，隐藏按钮

关

，当

item.active===0时

按钮

打开

隐藏和

关闭

。