使用此（非范围）在Ionic中的主详细信息视图中传递数据？

Question

更新

服务似乎是在获取数据，但是当数据发送到控制器时，它是未定义的。添加service.js文件以供参考

service.js

.service('VideosModel', function ($http, Backand) {
         var service = this,
      baseUrl = '/1/objects/',
      objectName = 'videos/';

        function getUrl() {
            return Backand.getApiUrl() + baseUrl + objectName;
        }

        function getUrlForId(id) {
            return getUrl() + id;
        }

        service.all = function () {
            console.log($http.get(getUrl()));
            return $http.get(getUrl());
        };

        service.fetch = function (id) {
            console.log('Inside s');
            console.log($http.get(getUrlForId(id)));
            return $http.get(getUrlForId(id));

        };

        service.create = function (object) {
            return $http.post(getUrl(), object);
        };

        service.update = function (id, object) {
            return $http.put(getUrlForId(id), object);
        };

        service.delete = function (id) {
            return $http.delete(getUrlForId(id));
        };
    })

产品图

我正在尝试使用此代替范围（使用范围here的示例）在我的应用程序中的一个选项卡上实现主 - 详细信息视图。但是我的详细信息视图没有得到数据/它是说detailCtrl未定义。我相信我在我的控制器或app.js中犯了一个错误，但我真的不知道如何修复它。

master.html

<ion-view view-title="Videos">
     <div ng-if="!vm.isCreating && !vm.isEditing">
    <ion-content class="padding has-header">
        <!-- LIST -->
        <div class="row gallery">
            <div class="list card col col-25" ng-repeat="object in vm.data"
                 ng-class="{'active':vm.isCurrent(object.id)}">
                <a class="cardclick" href="#/details/{{object.id}}">
                <div class="item item-image">
                  <img ng-src="{{object.img}}"/> 
                </div>
                <div class="item item-icon-left assertive">
                <i class="icon ion-play"></i>
                <p> Watch</p>
                <h2> {{object.title}} </h2>
                </div>
                </a>
            </div>
        </div>
    </ion-content>
</div>

详情视图或videoplayer.html

<ion-view title="Now Playing" hide-nav-bar="true">
    <div class="modal transparent fullscreen-player">
      <video src="{{object.src}}" class="centerme" controls="controls" autoplay></video>
    </div>

app.js

 $stateProvider
            // setup an abstract state for the tabs directive
            .state('login', {
                url: '/login',
                templateUrl: 'templates/login.html',
                controller: 'LoginCtrl as login'
            })
        .state('forgotpassword', {
                url: '/forgot-password',
                templateUrl: 'templates/forgot-password.html',
            })
        .state('tab', {
                url: '/tabs',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })
            .state('tab.videos', {
                url: '/videos',
                views: {
                    'tab-videos': {
                        templateUrl: 'templates/tab-videos.html',
                        controller: 'VideosCtrl as vm'
                    }
                }
            })
        .state('tab.games', {
                url: '/games',
                views: {
                    'tab-games': {
                        templateUrl: 'templates/tab-games.html'

                    }
                }
            })
        .state('tab.help', {
                url: '/help',
                views: {
                    'tab-help': {
                        templateUrl: 'templates/tab-help.html'

                    }
                }
            })
        .state('details', {
        url: "/details/:id",
        templateUrl: 'templates/videoplayer.html',
        controller: 'detailsCtrl as vm'
           });

        $urlRouterProvider.otherwise('/login');

        $httpProvider.interceptors.push('APIInterceptor');
    })

控制器

    .controller('VideosCtrl', function (VideosModel, $rootScope) {
        var vm = this;

        function goToBackand() {
            window.location = 'http://docs.backand.com';
        }

        function getAll() {
            vm.data=[];
            VideosModel.all()
                .then(function (result) {
                    vm.data = result.data.data;
                    console.log(vm.data);
                });
        }



        function initCreateForm() {
            vm.newObject = {name: '', description: ''};
        }

        function setEdited(object) {
            vm.edited = angular.copy(object);
            vm.isEditing = true;
        }

        function isCurrent(id) {
            return vm.edited !== null && vm.edited.id === id;
        }

        function cancelEditing() {
            vm.edited = null;
            vm.isEditing = false;
        }

        function cancelCreate() {
            initCreateForm();
            vm.isCreating = false;
        }
        function clearData(){
            vm.data = null;
        }

        function create(object) {
            VideosModel.create(object)
                .then(function (result) {
                    cancelCreate();
                    getAll();
                });
        }

        function update(object) {
            VideosModel.update(object.id, object)
                .then(function (result) {
                    cancelEditing();
                    getAll();
                });
        }

        function deleteObject(id) {
            VideosModel.delete(id)
                .then(function (result) {
                    cancelEditing();
                    getAll();
                });
        }


        vm.edited = null;
        vm.isEditing = false;
        vm.isCreating = false;
        vm.getAll = getAll;
        vm.create = create;
        vm.update = update;
        vm.delete = deleteObject;
        vm.setEdited = setEdited;
        vm.isCurrent = isCurrent;
        vm.cancelEditing = cancelEditing;
        vm.cancelCreate = cancelCreate;
        vm.goToBackand = goToBackand;
        vm.isAuthorized = false;

        $rootScope.$on('authorized', function () {
            vm.isAuthorized = true;
            getAll();
        });

        $rootScope.$on('logout', function () {
            clearData();
        });

        if(!vm.isAuthorized){
            $rootScope.$broadcast('logout');
        }

        initCreateForm();
        getAll();

    })


.controller('detailsCtrl',function($stateParams,VideosModel){
    var vm = this;
    var videoId = $stateParams.id;

        function getforId(id) {
            vm.data=[];
            VideosModel.fetch(id)
                .then(function (result) {
                    vm.data = result.data.data;
                    console.log(vm.data);
                });
        }



       getforId(videoId);



});

如何使用此传递数据？

Answer 1

为了使用controllerAs语法（将范围属性绑定到控制器中的'this'），您需要在控制器中为控制器添加别名。

<div ng-controller="detailsCtrl as vm">

默认情况下，你的html将在你的控制器上引用$ scope，除非你给它一个别名。

https://docs.angularjs.org/api/ng/directive/ngController