" /> javascript - "Thinking in AngularJS" si j'ai un fond jQuery | 2022 codeprofesseur

javascript - "Thinking in AngularJS" si j'ai un fond jQuery

Mots clés : javascriptjqueryangularjsjavascript

meilleur 2 Réponses javascript - "Thinking in AngularJS" si j'ai un fond jQuery

vote vote

100

<ul class="main-menu">     <li class="active">         <a href="#/home">Home</a>     </li>     <li>         <a href="#/menu1">Menu 1</a>         <ul>             <li><a href="#/sm1">Submenu 1</a></li>             <li><a href="#/sm2">Submenu 2</a></li>             <li><a href="#/sm3">Submenu 3</a></li>         </ul>     </li>     <li>         <a href="#/home">Menu 2</a>     </li> </ul> 
$('.main-menu').dropdownMenu(); 
<ul class="main-menu" dropdown-menu>     ... </ul> 
$.ajax({   url: '/myEndpoint.json',   success: function ( data, status ) {     $('ul#log').append('<li>Data Received!</li>');   } }); 
<ul class="messages" id="log"> </ul> 
$http( '/myEndpoint.json' ).then( function ( response ) {     $scope.log.push( { msg: 'Data Received!' } ); }); 
<ul class="messages">     <li ng-repeat="entry in log">{{ entry.msg }}</li> </ul> 
<div class="messages">     <div class="alert" ng-repeat="entry in log">         {{ entry.msg }}     </div> </div> 
<a href="/hello" when-active>Hello</a> 
it( 'should add "active" when the route changes', inject(function() {     var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );      $location.path('/not-matching');     expect( elm.hasClass('active') ).toBeFalsey();      $location.path( '/hello' );     expect( elm.hasClass('active') ).toBeTruthy(); })); 
.directive( 'whenActive', function ( $location ) {     return {         scope: true,         link: function ( scope, element, attrs ) {             scope.$on( '$routeChangeSuccess', function () {                 if ( $location.path() == element.attr( 'href' ) ) {                     element.addClass( 'active' );                 }                 else {                     element.removeClass( 'active' );                 }             });         }     }; }); 
.directive( 'myDirective', function () {     return {         template: '<a class="btn">Toggle me!</a>',         link: function ( scope, element, attrs ) {             var on = false;              $(element).click( function () {                 on = !on;                 $(element).toggleClass('active', on);             });         }     }; }); 
.directive( 'myDirective', function () {     return {         scope: true,         template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',         link: function ( scope, element, attrs ) {             scope.on = false;              scope.toggle = function () {                 scope.on = !scope.on;             };         }     }; }); 
vote vote

88

<a ng-click="toggle()">Menu</a> <ul ng-show="menu.visible">   ... </ul> 
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a> <ul ng-show="menu.visible">   ... </ul> 
<input ng-model="user.name" /> 
<p>   {{user.name}} </p> 
myApp.service('FlickrService', function() {   return {     getFeed: function() { // do something here }   } }); 
myApp.controller('myController', ['FlickrService', function(FlickrService) {   FlickrService.getFeed() }]); 

Questions similaires