Angularjs +指令文件的HTML內容的單擊事件不會在js文件的工作

我在角JS新，Angularjs +指令文件的HTML內容的單擊事件不會在js文件的工作

現在儘量拆分模板一樣，頁眉，頁腳，leftmenu等。

在這裏，我加入左側菜單的例子。

左邊的菜單有ID =側邊欄菜單」。一旦點擊側邊欄菜單中需要做一些動作。

但是，相應的JS在custome.js

的‘邊欄菜單’單擊事件無法正常工作。

的Index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link href="bootstrap.css" rel="stylesheet"> 
     <script src="jquery.min.js"></script> 
    </head> 
    <body class="nav-md" ng-app="myApp" > 
     <div class="container body"> 
      <div class="main_container"> 
       <div left-menu></div> 
       <!-- top navigation --> 
       <div top-navigation></div> 
       <!-- /top navigation --> 
      </div> 
      <script src="vendor/bootstrap/dist/js/bootstrap.js"></script> 
      <script src="vendor/angular/angular.js"></script> 
      <script src="custom.js"></script> 
      <script src="app.js"></script> 
    </body> 
</html>

app.js

var app = angular.module('myApp', ['ngRoute']); 
app.config(['$routeProvider', '$httpProvider', 
function($routeProvider, $httpProvider) { 
    $routeProvider.when('/login', { 
     templateUrl : 'views/login.html', 
     controller : 'userController' 
    }).when('/register', { 
     templateUrl : 'views/register.html', 
     controller : 'userController' 
    }).otherwise({ 
     redirectTo : '/login' 
    }); 
}]); 
app.directive('leftMenu', function() { 
    return { 
     restrict : 'A', 
     templateUrl : "left-menu.html", 
     replace : true 
    }; 
});

個

custom.js

$(function() { 
    $('#sidebar-menu li').click(function() { 

     alert("Ddd"); 
     if ($(this).is('.active')) { 
      $(this).removeClass('active'); 
      $('ul', this).slideUp(); 
      $(this).removeClass('nv'); 
      $(this).addClass('vn'); 
     } else { 
      $('#sidebar-menu li ul').slideUp(); 
      $(this).removeClass('vn'); 
      $(this).addClass('nv'); 
      $('ul', this).slideDown(); 
      $('#sidebar-menu li').removeClass('active'); 
      $(this).addClass('active'); 
     } 
    }); 

});

左menu.html

<div id="sidebar-menu" > 
    <div class="menu_section"> 
     <h3>General</h3> 
     <ul class="nav side-menu"> 
      <li> 
       <a href="index3.html">Dashboard</a> 
      </li> 
      </li> 
      <li> 
       <a href="form_advanced.html">Advanced Components</a> 
      </li> 
     </ul> 
    </div> 
</div>

我明白我在指導方法加載在第一則HTML內容加載js文件的錯誤。

來源

2016-02-12 RSKMR

你的問題很清楚。你可以添加plunker/jsfiddle嗎？所以我們可以看到錯誤。 – amol01

既然你是新的角度，你可能不知道框架的功能，但你應該嘗試重寫這個，而不使用'custom.js' jQuery代碼。 Angular已經構建了諸如'ng-class'之類的指令，可以處理你正在做的大部分工作。 – SteamDev

@SteamDev - 是的，我瞭解ng級。因爲我正在處理現有的項目。所以我試圖使用現有的方法。它有可能做到這樣我的方式？ – RSKMR

的所有擺脫custom.js首先再添加一個「導航」指令的標籤，像這樣：

<div id="sidebar-menu" > 
    <div class="menu_section"> 
     <h3>General</h3> 
     <nav></nav> 
    </div> 
</div>

然後建立nav.html

<ul class="nav side-menu"> 
    <li ng-click=""> 
    <a href="index3.html">Dashboard</a> 
    </li> 
    <li> 
    <a href="form_advanced.html">Advanced Components</a> 
    </li> 
</ul>

然後創建導航指令

app.directive('nav', function() { 
    return { 
    restrict: 'EA', 
    template: 'nav.html', 
    link: function(scope, element, attrs) { 
     element.find('li').click(function() { 
     var $this = $(this); // optimize 

     if ($this.is('.active')) { 
      $this.removeClass('active'); 
      //$('ul', this).slideUp(); ? not sure what you're doing here? 
      $this.removeClass('nv'); 
      $this.addClass('vn'); 
     } else { 
      $this.find('ul').slideUp(); 
      $this.removeClass('vn'); 
      $this.addClass('nv'); 
      //$('ul', this).slideDown(); ? not sure what you're doing here? 
      element.find('li').removeClass('active'); 
      $this.addClass('active'); 
     } 
     }); 
    } 
    } 
});

我還沒有測試代碼，但這是你需要做的事情的要點。

當您需要操縱dom時，您應該創建一個指令並使用「鏈接」函數，它將傳遞作用域，元素（指令的輕型jquery包裝的dom元素）和屬性。從那裏你可以執行所需的任務。另外一定要有一個全球性的jQuery對象'$'，角度確實帶有一個jqLite版本作爲angular.element *不要與鏈接函數中傳遞的'element'混淆，但是lite版本沒有全部你可能需要的鐘聲和口哨聲。

來源

2016-02-12 17:37:33 micahblu

Angularjs +指令文件的HTML內容的單擊事件不會在js文件的工作

回答

相關問題