angular javascript 不适用于 ui-查看插入的元素

Question

当我将代码从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 元素。

我觉得这个post问了同样的问题，没有解决。自定义指令确实可以解决问题，但您不能仅使用指令来模仿 ui router

的功能

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

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");
})

Answer 1

问题： $("ul li a") 正在尝试分配点击事件处理程序 before 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 代码，并且 disable/enable 它们很容易。

angular javascript 不适用于 ui-查看插入的元素

angular javascript won't apply to ui-view inserted element

javascript

jquery

uiview

angularjs