Директива не модифицирует Угловые

Js:Директива не модифицирует Угловые

myApp.directive('locationClass', function ($location) { 

    return { 
     restrict : 'A', 
     link: function (scope, element) { 
      var currentLocation = $location.path(); 

      var formatCurrentLocation = currentLocation.replace(/\//g, " "); 

      //console.log(currentLocation); 
      element.addClass(formatCurrentLocation); 
    } 

    } 

});

Html

<html ng-app="myApp" ng-controller="headerCtrl as header" location-class>

работает corrrectly, но при загрузке страницы, она обновляется, когда я изменить шаги значение не обновляется.

Url Пример: CounterForm/InstallCounter к CounterForm/CounterEquipment

Я использую Ui-router.
Любая идея? Thanks

источник

2015-06-01 sani

Когда это необходимо обновить? когда изменяется свойство области видимости? – aw04

при обновлении url – sani

Функция ссылки вызывается только один раз, когда директива получает визуализацию.

Это означает, что когда ваш html был визуализирован в первый раз, тогда только функция была вызвана. И так оно и работало. Когда URL изменяется, вам необходимо, чтобы слушатели обновлялись в соответствии с изменениями.

У него не будет прямых подключений к URL-адресу.

Вам необходимо создать прослушиватель на $ locationChangeSuccess событие в функции связи. Это должно сделать вашу работу.

Проверьте документацию here. Найдите эту функцию там. Тогда, когда вы меняете свой URL-адрес, он будет вызываться, и изменения будут выполнены. Ваша директива становится как:

myApp.directive('locationClass', function ($location, $rootScope) { 

    return { 
     restrict : 'A', 
     link: function (scope, element) { 
      $rootScope.$on('$locationChangeSuccess', function() { 
       var currentLocation = $location.path(); 

       var formatCurrentLocation = currentLocation.replace(/\//g, " "); 

       //console.log(currentLocation); 
       element.addClass(formatCurrentLocation); 
      }); 

    } 
}

UPDATE с целью классов поворотных:

Вы можете использовать переменную области действия вместо этого. Мы можем просто иметь переменную для хранения класса и поместить переменную в html. Проверьте значение locationClass в html.

Так что ваш HTML будет как:

<html ng-app="myApp" ng-controller="headerCtrl as header" location-class class="{{locationClass}}">

и ваша директива, мы изменяем как:

myApp.directive('locationClass', function ($location, $rootScope) { 

    return { 
     restrict : 'A', 
     link: function (scope, element) { 
      $rootScope.$on('$locationChangeSuccess', function() { 
       var currentLocation = $location.path(); 

       var formatCurrentLocation = currentLocation.replace(/\//g, " "); 
       scope.locationClass = formatCurrentLocation; 

      }); 

    } 
}

Так что теперь каждый раз, когда вы меняете свое местоположение, когда изменение прошло успешно, то переменная будет обновляться по атрибуту класса, а ваш html будет иметь новый класс. Вам не нужно удалять старый класс вручную.

Я думаю, что это решит проблему, а также это лучший способ делать вещи. Мы не хотим напрямую обращаться к DOM, если это не необходимо в AngularJS. Если переменная может это сделать, мы это делаем.

UPDATE 2: (если вы хотите использовать часы):

Мы можем держать часы на location.path() и использовать также для отслеживания имени класса.

myApp.directive('locationClass', function ($location, $rootScope) { 

    return { 
     restrict : 'A', 
     link: function (scope, element) { 

      scope.$watch('$location.path()', function(currentLocation) { 

       var formatCurrentLocation = currentLocation.replace(/\//g, " "); 
       scope.locationClass = formatCurrentLocation; 
      }); 

    } 
}

Но все же я бы порекомендовал вам отправиться к слушателю с успехом изменения местоположения. Причина в том, что часы тяжелые и будут срабатывать каждый раз, когда область становится грязной (означает почти каждый раз, если область видимости находится на теле), тогда как прослушиватель событий вызывает функцию только тогда, когда URL-адрес будет изменен. Вы можете поместить консоль внутри функции, чтобы ее проверить и проверить.

источник

2015-06-01 12:46:50 Kop4lyf

проблема в том, что новые классы не будут заменены старыми, а jus add classes в html – sani

изменил его. Пожалуйста, проверьте. – Kop4lyf

Спасибо за полезные советы, но класс не работает, также я попробовал ng-class – sani

вы должны наблюдать переменную области действия для изменения

return { restrict: 'A', scope: { name: '=' }, link: function($scope) { $scope.$watch('name', function() { // all the code here... }); } };

По вашему примеру я думаю, что он будет работать

scope.$watch('data', function(){ // replace data with variable on which you have to watch change var currentLocation = $location.path(); var formatCurrentLocation = currentLocation.replace(/\//g, " "); element.addClass(formatCurrentLocation); $compile(element.contents())(scope); });

источник

2015-06-01 12:49:30

1+ спасибо, что это? $ Компиляции (element.contents()) (масштаб); – sani

вы можете использовать компиляцию, чтобы связать область действия и шаблон вместе. если у вас есть какая-либо переменная, присутствующая в вашем шаблоне или в html, то для связывания области с этой переменной мы можем использовать compile –

. Компиляция - это процесс перемещения дерева DOM и сопоставления элементов DOM с директивами. https://docs.angularjs.org/api/ng/service/$compile –

Директива не модифицирует Угловые

ответ

Смежные вопросы