在Ionic中的Custom Button上实现Css和Js功能

时间:2017-01-02 22:30:41

标签: javascript css ionic-framework ionic2

我正在尝试在Ionic中创建自定义按钮。

所以,我的问题是我想要实现CSS方法和Controller.js函数方法到我的HTML文件类按钮。如何将两个方法添加到按钮??

Html文件

<div>
<button class="custom_btn"> 
</button>

style.css文件代码:

.custom_btn {

    width: 200px;
    height: 200px;
    padding: 10px;
    line-height: 50px;
    text-align: left;
    text-indent: 10px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #333;
    background-color: white;
    cursor: pointer;
    margin: 20px;
} 

Controller.js文件代码

在Controller.js文件中的

我在按钮上执行一些操作时点击

$scope.btnClicked = function()
{
//Perform some Action When it's Clicked
 }

屏幕上的自定义按钮按CSS代码显示,但它不是调用函数方法。请提供任何解决方案。谢谢。

1 个答案:

答案 0 :(得分:1)

将按钮更改为

<button class="custom_btn" onclick="whenButtonIsClicked()"> 
</button>

你的JS代码

function whenButtonIsClicked() {
//actions to perform
}

说明: 按钮的onclick属性告诉whenButtonIsClicked()函数在单击按钮时运行。 此操作不需要框架。