AngularJS - переменные области видимости в Angular UI router

0

У меня есть серия маршрутов для приложения AngularJS, которое я разрабатываю. Я не могу понять, почему я не могу получить доступ к областям видимости из представления. Мой код:

маршрут

.state('dashboard.unique', {
            url:'/unique/:id',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/uniqueservice.html',
                controller: 'uniqueController'
              }
            }
        });

Посмотреть:

<ion-view title="Closer" class="closerTitle">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-drag"></button>
  </ion-nav-buttons>
  <ion-content class="has-header insideAPP lightBG" id="servicio_unico">
    <div class='gallery'>
      <img ng-src="{{urlImagen}}" />
    <h1>{{nombre}}</h1>
    <p>{{descripcion}}</p>
    <ul>
      <li>Precio: {{precio | currency}}</li>
      <li>Duración: {{duracion}}</li>
      <li>Hora Inicio: {{hora_inicio}}</li>
      <li>Valoración: </li>
    </ul>
  </ion-content>
</ion-view>

контроллер

app.controller('uniqueController', function($scope, $stateParams, $ionicLoading, $http, CLOSER_SERVER) {
    $scope.urlImagen = "img/no_image.png";
    $scope.nombre = "Nombre del servicio";
    $scope.descripcion = "Descripcion del servicio";
    $scope.precio = "999 €";
    $scope.hora_inicio = "Hora del servicio";
    $scope.duracion = "Duracion del servicio";
    $scope.id_servicio = $stateParams.id;

    var urlMaker = CLOSER_SERVER.url+'/servicio/'+$scope.id_servicio;
    $http.get(urlMaker)
      .success(function(response) {
        var datos = JSON.stringify(response);
        datos = JSON.parse(datos);
        console.log(datos);
        $scope.urlImagen = datos.urlImagen;
        $scope.nombre = datos.nombre;
        $scope.descripcion = datos.descripcion;
        $scope.id_servicio = datos.id_servicio;
        $scope.precio = datos.precio;
        $scope.hora_inicio = datos.hora_inicio;
        $scope.duracion = datos.duracion;
        //Digerimos los datos para que se propaguen por el modelo

      })
      .error(function(error, data, headers){
        console.log("Connection error");
      });
});

Не важно, что я делаю, представление остается пустым. Я использую Angular UI Router, я не понимаю, как использовать ui router?

EDIT Routes.js

closer.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url:'/',
            templateUrl: 'closerViews/init.html',
            controller: 'initController'
        })
        .state('login', {
            url:'/login',
            templateUrl: 'closerViews/login.html',
            //Aqui vamos a poner un resolve a ReconnectResolver, para chequear si
            //el token está guardado y que nos de un token renovado
            controller: 'loginController'
        })
        .state('forgot', {
            url:'/forgot_password',
            templateUrl: 'closerViews/forgot.html',
            controller: 'forgotController'
        })
        .state('forgotCode', {
            url:'/insert_your_code',
            templateUrl: 'closerViews/forgotCode.html',
            controller: 'forgotCodeController'
        })
        .state('signup', {
            url:'/signup',
            templateUrl: 'closerViews/signup.html',
            controller: 'signupController'
        })
        .state('dashboard', {
            url:'/dashboard',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            abstract: true,
            templateUrl: 'closerViews/dashboard/dashboard.html'
        })
        .state('dashboard.myDashboard', {
            url:'/myDashboard',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/myDashboard.html',
                controller: 'myDashboardController'
              }
            }
        })
        .state('dashboard.configuration', {
            url:'/configuration',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/configuration.html',
                controller: 'configController'
              }
            }
        })
        .state('dashboard.user', {
            url:'/user',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/user.html',
                controller: 'userController'
              }
            }
        })
        .state('dashboard.search', {
            url:'/search',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/search.html',
                controller: 'searchController'
              }
            }
        })
        .state('dashboard.legalterms', {
            url:'/legalterms',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/legalterms.html',
                controller: 'legalController'
              }
            }
        })
        .state('dashboard.allservices', {
            url:'/allservices',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/allservices.html',
                controller: 'servicesController'
              }
            }
        })
        .state('dashboard.unique', {
            url:'/unique/:id',
            resolve: {
              auth: function resolveAuthentication(AuthResolver) {
                return AuthResolver.resolve();
              }
            },
            views: {
              'menuContent': {
                templateUrl: 'closerViews/dashboard/uniqueservice.html',
                controller: 'uniqueController'
              }
            }
        });
        $urlRouterProvider.otherwise('/');

}]);
  • 1
    Если вы используете псевдоним для представления, вы должны сказать angular, где он будет отображать ваш шаблон: `<div ui-view =" menuContent "> '
  • 1
    Кроме того, вы не указали контроллер для url:'/unique/:id' Вы должны указать его в config или html (ng-controller).
Показать ещё 13 комментариев
Теги:
angular-ui-router

1 ответ

1
Лучший ответ

Если вы используете псевдоним для просмотра, вы можете сказать угловое, где оно будет отображать ваш шаблон: <div ui-view="menuContent"> также вы не <div ui-view="menuContent"> контроллер для URL: '/unique/: id' Вы должны указать его в config или в html (ng-controller)

  • 0
    Большое спасибо за вашу помощь, я забыл атрибут ui-view.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню