javascript - AngularJS - Angular ui 路由器中的范围变量

Question

我有一个正在开发的 AngularJS 应用程序的路线系列。我不明白为什么我无法从 View 访问范围变量。我的代码:

路线

.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>

Controller

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

无论我做什么， View 仍然是空白的。我正在使用 Angular UI Router，我是否误解了 ui router 的范围使用？

编辑路由.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('/');

}]);

Answer 1

如果您使用别名作为 View ，您应该在渲染模板时指定 Angular:<div ui-view="menuContent">另外，您没有将 Controller 指向 url:'/unique/:id' 您必须在配置或 html(ng-controller) 中指向它