2016-09-30 75 views
3

我想在视图中显示对象。该对象本身就是控制器,但是html无法访问其属性(可能看不到该模型)!也许这个问题,路由? app.jshtml无法访问控制器中的对象angularjs

(function() { 
 
\t 'use strict'; 
 

 
\t angular 
 
\t .module('hawk', [ 
 
\t \t 'ngWebsocket', 
 
\t \t 'ui.bootstrap', 
 
\t \t 'ui.router', 
 
\t \t 'hawk.controllers', 
 
\t \t 'hawk.services', 
 
\t \t 'hawk.directives' 
 
\t \t ]) 
 
\t .config(['$stateProvider', '$urlRouterProvider', router]) 
 
\t .run(['$rootScope', main]); 
 

 
\t angular.module('hawk.services', []); 
 
\t angular.module('hawk.directives', []); 
 
\t angular.module('hawk.controllers', []); 
 

 

 
\t function router($stateProvider, $urlRouterProvider) { 
 

 
\t \t $urlRouterProvider.otherwise('/list'); 
 

 
\t \t // CARDS OBJECT VIEW 
 
\t \t $stateProvider 
 
\t \t \t .state('list', { 
 
\t \t \t abstract: true, 
 
\t \t \t url: '/list', 
 
\t \t \t templateUrl: '/app/app-eng/controllers/list.html', 
 
\t \t \t controller: 'ListController as dc' 
 
\t \t }) \t 
 
\t \t \t .state('list.cards-list', { 
 
\t \t \t \t url: '/cards-list', 
 
\t \t \t \t templateUrl: '/app/app-eng/controllers/object-card/cards-list.html', 
 
\t \t \t \t controller: 'CardsListController as dc', 
 
\t \t \t }) 
 
\t \t \t .state('list.contract', { 
 
\t \t \t \t url: '/contract', 
 
\t \t \t \t templateUrl: '/app/app-eng/controllers/object-card/contract.html', 
 
\t \t \t \t controller: 'ContractController as dc', 
 
\t \t \t }) 
 
\t \t \t 
 
\t } 
 

 
\t function main ($rootScope) { 
 
\t \t $rootScope.object = {}; 
 
\t } 
 
})();

的submittion list.cards,名单上有访问对象(从模型),但提交list.contract我得到的对象,不能访问它的属性(在模型中)。为什么?

list.html

<div class="list-group col-md-2 sidebar-offcanvas"> 
 
    <uib-tabset active="activePill" vertical="true" type="pills"> 
 
     <uib-tab index="0" heading="Cards list" ui-sref="list.cards-list"></uib-tab> 
 
     <uib-tab index="1" heading="Contract" ui-sref="list.contract"></uib-tab> 
 
    </uib-tabset> 
 
</div> 
 
<div class="col-md-10"> 
 
    <div ui-view></div> 
 
</div>

contract.html

<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Contract #{{ 2222222}}</h3> 
 
    </div> 
 

 
    <table class="table table-condensed"> 
 
    <tr> 
 
     <td width="10%" align="right"><strong>№ contract:</strong></td> 
 
     <td>{{dc.data.id}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right"><strong>Date start:</strong></td> 
 
     <td>{{dc.data.cdstart}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right"><strong>Date end:</strong></td> 
 
     <td>{{dc.data.cdend}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right"><strong>Type name:</strong></td> 
 
     <td>{{dc.data.tyonames}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right"><strong>Category.:</strong></td> 
 
     <td>{{dc.data.ccategory}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td align="right"><strong>Police department:</strong></td> 
 
     <td>{{dc.data.rpnames}}</td> 
 
    </tr> 
 
    </table> 
 
</div>

contract.js

(function() { 
 
\t 'use strict'; 
 

 
\t angular 
 
\t \t .module('hawk.controllers') 
 
\t \t .controller('ContractController', ContractController); 
 

 
\t ContractController.$inject = ['$scope', 'Websocket']; 
 

 
\t function ContractController ($scope, Websocket) { 
 
\t \t var vm = this; 
 

 
\t \t vm.data = {}; 
 

 
\t \t init(); 
 
\t \t 
 
\t \t function getContracts (id) { 
 
\t \t \t console.log('getContracts-id', id); 
 
\t \t \t Websocket.getContracts({ id: id }).then(function(data) { 
 
\t \t \t \t console.log('getContracts-data', data); 
 
\t \t \t \t vm.data = data.data; 
 
\t \t \t \t console.log('getContracts-vm.data', vm.data); 
 
\t \t \t }); 
 
\t \t } 
 

 
\t \t function getAddress (id) { 
 
\t \t \t Websocket.getAddress({ id: id }).then(function(data) { 
 
\t \t \t \t console.log('getAddress', data); 
 
\t \t \t \t vm.address = data.data; 
 
\t \t \t }); 
 
\t \t } 
 

 
\t \t function init() { 
 
\t \t \t $scope.$watch('object.id', function(newValue, oldValue) { 
 
\t \t \t \t console.log('cc', newValue, oldValue, $scope.object.id); 
 
\t \t \t \t getContracts($scope.object.id); 
 
\t \t \t }); 
 
\t \t } 
 
\t } 
 
})();

+0

也许你忘了'ng-controller =“ContractController”'在你的html中? – Icepickle

+0

不,它仍然不会改变任何东西。 –

回答

0

你与访问您的变量 “虚拟机”。在您的HTML - >“{{vm.data}}”等

//编辑: 如果你想访问它们没有“虚拟机”,你必须把你的变量到你的“$范围”控制器。

+0

不! vm是一个本地的$ scope。如果我将vm替换为$ scope,则演示文稿中没有任何更改!该对象仍然不可用! 在视图中将{{dc.data.property}}替换为{{data.proerty}}并进行更改! –

+0

是的,你的权利@ IgorE.Arkhipenko,我也建议改变控制器:'CardsListController作为dc',到控制器:'CardsListController作为vm',所以它无处不在,你没有这些问题 – YaennuuH