角度 javascript 不适用于 ui-view 插入元素答案

【问题标题】：angular javascript won't apply to ui-view inserted element角度 javascript 不适用于 ui-view 插入元素
【发布时间】：2016-06-23 19:10:53
【问题描述】：

当我将代码从 main.html 粘贴到 index.html 时，javascript 代码工作正常，点击功能会触发涟漪效应。

http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design>

但是当我将代码提取到 main.html 并通过 ui-view 插入时，内容会插入到 index.html，但 javascript 代码不再起作用。它被加载，但该功能不适用于 ul li a 元素。

Javascript not accessible from inside Angular ui-view

我认为这篇文章问了同样的问题，但没有解决。自定义指令确实可以解决问题，但您不能只使用指令来模仿 ui 路由器的功能

非常感谢任何帮助！谢谢。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <base href="/">
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

<body ng-app="blog">

    <div ui-view></div>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/controller/main.js"></script>
    <script type="text/javascript" src="app/controller/main.controller.js"></script>
    <script type="text/javascript" src="app/scripts/ripple.js"></script>
</body>
</html>

app.js

'use strict';

angular.module('blog', ['ui.router'])
  .config(function ($urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
  });

main.js

    'use strict';

    angular.module('blog')
      .config(function ($stateProvider) {
        $stateProvider
          .state('main', {
            url: '/',
            templateUrl: 'app/views/main.html',
            controller: 'MainCtrl'
          });
      });

app/views/main.html

  <div id="blogHeader" class = "container">
    <div class="jumbotron">

    <ul class="tabs">
      <li><a href="/">Home</a></li>
      <li><a href="">Study note</a></li>
    </ul>   
    </div>
</div>

ripple.js

//jQuery time
var parent, ink, d, x, y;
$("ul li a").click(function(e){
    parent = $(this).parent();
    //create .ink element if it doesn't exist
    if(parent.find(".ink").length == 0)
        parent.prepend("<span class='ink'></span>");

    ink = parent.find(".ink");
    //incase of quick double clicks stop the previous animation
    ink.removeClass("animate");

    //set size of .ink
    if(!ink.height() && !ink.width())
    {
        //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
        d = Math.max(parent.outerWidth(), parent.outerHeight());
        ink.css({height: d, width: d});
    }

    //get click coordinates
    //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
    x = e.pageX - parent.offset().left - ink.width()/2;
    y = e.pageY - parent.offset().top - ink.height()/2;

    //set the position and add class .animate
    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})

【问题讨论】：

将该代码放入指令中
我遇到了完全相同的问题，但在表单元素上。无论如何，玩弄各种可能性并带着答案回到这里。很快再见。

标签： javascript jquery angularjs uiview

【解决方案1】：

问题： $("ul li a") 正在尝试分配点击事件处理程序之前 main.html 被注入到 DOM 树中！

短解：（编辑一行）在 ripple.js

中

$(document).on('click', 'ul li a', function (e) {

更好的解决方案（更多控制）：
在 ripple.js 中将所有代码放入一个新函数中，例如：

function add_ripple_btn_effect()
    //jQuery time
    var parent, ink, d, x, y;
    $("ul li a").click(function(e){
    ...
    ...
}

然后在UI stateChange success event 中调用这个函数。此方法将允许您在将来添加更多 jQuery 代码并轻松禁用/启用它们。

【讨论】：