Question

我正在编写一个Ionic应用程序，但我遇到了自定义指令元素的问题。

的简化代码

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

如果您点击“搜索职位代码”按钮，则会转到搜索页面。当您在此页面上时，如果单击左上角的后退按钮，则第一页上的地图仍会显示“确定”。但是，如果单击“选择作业代码”按钮，则会将您重定向回原始页面，但地图不可见。

有人可以告诉我什么是错的以及如何解决它？

感谢您的帮助

编辑：我注意到如果我不包括任何参数，就像这样：

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

然后该指令保持完整且有效。但是，只要我发送params以及状态更改，该指令就不再起作用了：

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

Answer 1

很抱歉我不能发表评论。所以我认为你的问题是关于

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

和

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

您的第一个标签和最后一个标签具有相同的标题。也许你可以尝试更改其中一个。你的后退按钮正在浏览我想的视图标题。

Answer 2

你能仔细检查你发送给 $ scope.selectJobCode函数的JSON输入是否正确？

在 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：

您可以使用angular inbuilt范围变量$ scope来访问任何用户定义的对象或变量上的watch函数。

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

Answer 3

我暂时使用了$ rootScope和$ watch，而不是使用$ stateParams，现在可以正常工作了：

在app.jobs-search controller中：

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

这个解决方案适合我的需要，但我仍然很好奇为什么指令问题出现在原来的问题上。

返回页面后，Angular指令不会显示

3 个答案: