Угловая директива не отображается после возвращения на страницу

Question

Я пишу приложение с ионизирующим устройством, и у меня возникают проблемы с настраиваемым элементом директивы.

Вот упрощенная codepen моей проблемы http://codepen.io/anon/pen/zGJRQg

angular.module('ionicApp',[ 
    'ionic' 
]) 

.directive('map', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function(scope, element, attributes) { 

      function drawMap(position) { 

       var myLatlng = new google.maps.LatLng(position.latitude, position.longitude); 

       var mapOptions = { 
        center: myLatlng, 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

       scope.marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map 
       }); 

       scope.map = map; 
      } 

      function updateMap(position) { 
       var newPosition = new google.maps.LatLng(position.latitude, position.longitude); 
       scope.marker.setPosition(newPosition); 
       scope.map.panTo(newPosition); 
      } 

      var position = { 
     coords: { 
      latitude: 50.2440218, 
      longitude: 5.2807709 
     } 
     }; 

      scope.currentPosition = position.coords; 

     if (!scope.map) { 
     drawMap(position.coords); 
     } else { 
     updateMap(position.coords); 
     } 

      scope.$on('$destroy', function() { 
       watch.clearWatch(); 
      }); 


     }, 
     template: '<div style="width: 100%; height: 280px;" id="map" data-tap-disabled="true"></div>' 
    } 
}); 

Если нажать на кнопку «поиск для кода работы», это приведет вас к странице поиска. Когда вы находитесь на этой странице, если вы нажмете кнопку «Назад» в верхнем левом углу, карта на первой странице все еще отображается ОК. Однако, если вы нажмете кнопку «выбрать код задания», вы будете перенаправлены обратно на исходную страницу, но карта не будет видна.

Может кто-нибудь сказать мне, что случилось, и как это исправить?

Спасибо за любую помощь

Edit: Я заметил, что если я не включают Params, например:

$scope.selectJobCode = function(jobCode) { 
    $state.go('app.jobs'); 
}; 

то директива остается неповрежденным и работать. Однако, как только я посылаю Params вместе с изменением состояния, директива больше не работает:

$scope.selectJobCode = function(jobCode) { 
    $state.go('app.jobs', { 
     jobCode: jobCode 
    }); 
}; 

Answer 1

Вместо того чтобы использовать $ stateParams, я временно использовал $ rootScope и $ часы, которые в настоящее время работает нормально:

В приложении.работа-поиск контроллер:

$scope.selectJobCode = function(jobCode) { 
    $rootScope.selectedJobCode = jobCode; 
    $state.go('app.jobs'); 
}; 

и в контроллере app.jobs:

$rootScope.$watch('selectedJobCode', function() { 
    if ($rootScope.selectedJobCode) { 
     $scope.selectedJobCode = $rootScope.selectedJobCode; 
     delete $rootScope.selectedJobCode; 
    } 
}); 

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

Answer 2

К сожалению о я не могу написать комментарий. Поэтому я думаю, ваша проблема заключается

<ion-view view-title="Jobs Search"> 

и

<ion-view view-title="Jobs"> 

Ваша первая вкладка и последняя вкладка имеет такое же название. Возможно, вы можете попробовать сменить один из них. Ваша задняя кнопка перемещается с видом-названием, я думаю.

Answer 3

вы можете проверить, отправлен ли вход JSON на $ scope.selectJobCode функция верна?

комментируя эту строку ниже в функции selectJobCode делает ваша программа прекрасно работает на щелчку выберите код задания кнопки

// $ionicHistory.backView().stateParams = {jobCode:jobCode}; 

Js code 
.state('app.jobs-search', { 
      url: "/jobs/search", 
      views: { 
       'menuContent': { 
        templateUrl: "templates/jobs-search.html", 
        controller: function($scope, $ionicHistory) { 
      $scope.selectJobCode = function(jobCode) { 
       // $ionicHistory.backView().stateParams = {jobCode:jobCode}; 
         $ionicHistory.goBack(); 
      }; 
      } 
       } 
      } 
     }) 

Updated1:
использования ниже кода. теперь он отлично работает.

$ionicHistory.backView().stateParams = [{"jobCode":jobCode}]; 

вместо этого

$ionicHistory.backView().stateParams = {jobCode:jobCode}; 

Updated2:

Вы можете использовать угловую встроенную область видимости переменных $ области, чтобы получить доступ к функции часов на любом определенный пользователь объекта или переменном.

$scope.$watch(theObjectUWantToWatch, function(new){ 
     console.log('new value is ' + new); 
    });