<!DOCTYPE html>
<html lang="pt-br">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>Diretiva ng-click | Academia Webdev</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="https://jacksongomesbr.github.com/academia-webdev/angularjs/ng-click.html">
  <!-- Icon -->
  <link rel="apple-touch-icon" sizes="57x57" href="/academia-webdev/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/academia-webdev/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/academia-webdev/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/academia-webdev/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/academia-webdev/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/academia-webdev/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/academia-webdev/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/academia-webdev/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="/academia-webdev/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/academia-webdev/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/academia-webdev/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/academia-webdev/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/academia-webdev/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/academia-webdev/icon/mstile-144x144.png">
  <!-- CSS -->
  <!-- build:css build/css/navy.css -->
  <link rel="stylesheet" href="/academia-webdev/css/navy.css" type="text/css">
  <!-- endbuild -->
  <link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <!-- RSS -->
  <link rel="alternative" href="/academia-webdev/atom.xml" title="Academia Webdev" type="application/atom+xml">
  <!-- Open Graph -->
  <meta name="description" content="A diretiva ng-click é utilizada para representar um comportamento de clique do mouse em um elemento, por exemplo um botão. O conteúdo da diretiva (o atributo) é um código JavaScript. O exemplo a segui">
<meta property="og:type" content="website">
<meta property="og:title" content="Diretiva ng-click">
<meta property="og:url" content="https://jacksongomesbr.github.com/academia-webdev/angularjs/ng-click.html">
<meta property="og:site_name" content="Academia Webdev">
<meta property="og:description" content="A diretiva ng-click é utilizada para representar um comportamento de clique do mouse em um elemento, por exemplo um botão. O conteúdo da diretiva (o atributo) é um código JavaScript. O exemplo a segui">
<meta property="og:updated_time" content="2015-10-14T20:25:01.858Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Diretiva ng-click">
<meta name="twitter:description" content="A diretiva ng-click é utilizada para representar um comportamento de clique do mouse em um elemento, por exemplo um botão. O conteúdo da diretiva (o atributo) é um código JavaScript. O exemplo a segui">
<meta name="twitter:site" content="jacksongomes">
<meta property="fb:admins" content="100000247608790">
  <!-- Swiftype -->
  <meta class="swiftype" name="title" data-type="string" content="Diretiva ng-click">
  <!-- Google Analytics -->
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4910098-10', 'auto');
  ga('send', 'pageview');
</script>

</head>
<body class="">
  <div id="container">
    <header id="header" class="wrapper">
  <div id="header-inner" class="inner">
    <h1 id="logo-wrap">
      <a href="/" id="logo">Hexo</a>
    </h1>
    <nav id="main-nav">
      <ul>
        <li class="main-nav-item"><a href="/academia-webdev/fundamentos/" class="main-nav-link">Fundamentos</a></li><li class="main-nav-item"><a href="/academia-webdev/news/" class="main-nav-link">News</a></li><li class="main-nav-item"><a href="/academia-webdev/angularjs/" class="main-nav-link">AngularJS</a></li><li class="main-nav-item"><a href="/academia-webdev/bootstrap/" class="main-nav-link">Bootstrap</a></li>
        <li class="main-nav-item">
          <a href="https://github.com/jacksongomesbr/academia-webdev" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
        </li>
      </ul>
    </nav>
    <div id="search-btn-wrap" class="main-nav-item">
      <a id="search-btn" class="main-nav-link st-search-launcher"><i class="fa fa-search"></i></a>
    </div>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
    <a id="mobile-search-btn" class="st-search-launcher"></a>
  </div>
</header>
    <div id="content-wrap">
  <div id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">Diretiva ng-click</h1>
                <a href="https://github.com/jacksongomesbr/academia-webdev/edit/master/source/angularjs/ng-click.md" class="article-edit-link" title="Melhorar esta documentação"><i class="fa fa-pencil"></i></a>
              </header>
              <div class="article-content" itemprop="articleBody" data-swiftype-index="true">
                <p>A diretiva <code>ng-click</code> é utilizada para representar um comportamento de clique do mouse em um elemento, por exemplo um botão. O conteúdo da diretiva (o atributo) é um código JavaScript. O exemplo a seguir demonstra a utilização desta diretiva.</p>
<iframe src="http://embed.plnkr.co/b3R5JbdIintYmk8HUkcx/preview" width="100%" height="300"></iframe>

<p>No controller, no arquivo <code>app.js</code>, na linha 6 é definida a função <code>salvar()</code>, que aceita como parâmetro o nome da cidade a ser inserida no vetor <code>cidades</code>.</p>
<p>Na view, no arquivo <code>index.html</code>, na linha 42 está presente o elemento <code>button</code> e nele é aplicada a diretiva <code>ng-click</code>. Neste caso, a diretiva indica que será chamada a função <code>salvar()</code> passando como parâmetro o model <code>nova_cidade</code> (vinculado ao <code>input</code> da linha 40) e, posteriormente, o valor do model será uma string vazia.</p>
<blockquote class="note info"><strong class="note-title">Exercício</strong><p>O exemplo anterior implementa parte das funcionalidades de um CRUD. Neste caso, está implementando a consulta (listagem dos dados) e o cadastro. Implemente a funcionalidade de excluir uma cidade.</p>
</blockquote>
              </div>
              <footer class="article-footer">
                <time class="article-footer-updated" datetime="2015-10-14T20:25:01.858Z" itemprop="dateModified">Última atualização: 2015-10-14</time>
                <a href="ng-repeat.html" class="article-footer-prev" title="Diretiva ng-repeat"><i class="fa fa-chevron-left"></i><span>Anterior</span></a><a href="ng-show-hide.html" class="article-footer-next" title="Diretivas ng-show e ng-hide"><span>Próximo</span><i class="fa fa-chevron-right"></i></a>
              </footer>
              
<section id="comments">
  <div id="disqus_thread"></div>
</section>
<script>
  var disqus_shortname = 'academiawebdev';
  var disqus_url = 'https://jacksongomesbr.github.com/academia-webdev/angularjs/ng-click.html';
  var disqus_title = "Diretiva ng-click";
  var disqus_config = function(){
    this.language = 'pt_BR';
  };
  (function(){
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//go.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>

            </div>
          </div>
          <aside id="article-toc" role="navigation">
            <div id="article-toc-inner">
              <strong class="sidebar-title">Conteúdo</strong>
              
              <a href="#" id="article-toc-top">Voltar para o topo</a>
            </div>
          </aside>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner"><strong class="sidebar-title">Iniciando</strong><a href="index.html" class="sidebar-link">Visão geral</a><a href="iniciando.html" class="sidebar-link">Iniciando</a><a href="ng-repeat.html" class="sidebar-link">Diretiva ng-repeat</a><a href="ng-click.html" class="sidebar-link current">Diretiva ng-click</a><a href="ng-show-hide.html" class="sidebar-link">Diretivas ng-show e ng-hide</a><a href="model-complexo.html" class="sidebar-link">Model complexo</a><a href="form-validacao.html" class="sidebar-link">Validação de formulários</a></div>
</aside>
    </div>
  </div>
</div>
    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2015 <a href="http://jacksongomesbr.github.com/" target="_blank">Jackson Gomes</a><br>
      Licenciado sob <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="https://twitter.com/jacksongomes" class="footer-link" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/jacksongomesbr/academia-webdev" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>
  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <ul id="mobile-nav-list">
      <li class="mobile-nav-item"><a href="/academia-webdev/fundamentos/" class="mobile-nav-link">Fundamentos</a></li><li class="mobile-nav-item"><a href="/academia-webdev/news/" class="mobile-nav-link">News</a></li><li class="mobile-nav-item"><a href="/academia-webdev/angularjs/" class="mobile-nav-link">AngularJS</a></li><li class="mobile-nav-item"><a href="/academia-webdev/bootstrap/" class="mobile-nav-link">Bootstrap</a></li>
      <li class="mobile-nav-item">
        <a href="https://github.com/jacksongomesbr/academia-webdev" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
      </li>
    </ul>
    
      <strong class="mobile-nav-title">Iniciando</strong><a href="index.html" class="mobile-nav-link">Visão geral</a><a href="iniciando.html" class="mobile-nav-link">Iniciando</a><a href="ng-repeat.html" class="mobile-nav-link">Diretiva ng-repeat</a><a href="ng-click.html" class="mobile-nav-link current">Diretiva ng-click</a><a href="ng-show-hide.html" class="mobile-nav-link">Diretivas ng-show e ng-hide</a><a href="model-complexo.html" class="mobile-nav-link">Model complexo</a><a href="form-validacao.html" class="mobile-nav-link">Validação de formulários</a>
    
  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>Português</span></span>
    <select id="mobile-lang-select" data-canonical="">
      
        <option value="en">English</option>
      
        <option value="pt-br" selected>Português</option>
      
    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->
<script src="/academia-webdev/js/lang_select.js" type="text/javascript"></script>
<script src="/academia-webdev/js/toc.js" type="text/javascript"></script>
<script src="/academia-webdev/js/mobile_nav.js" type="text/javascript"></script>
<!-- endbuild -->
<script src="//cdn.jsdelivr.net/retinajs/1.1.0/retina.min.js" async></script>

<!-- Swiftype -->
<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');

  _st('install','EwN4HMy_KMxTK_GMjV1z');
</script>
</body>
</html>