html无法访问控制器angularjs

Question

我想在视图中显示该对象。对象本身就是控制器，但是html无法访问其属性（可能看不到模型）！也许问题ui路由？ app.js

    (function () {
	'use strict';

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

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


	function router($stateProvider, $urlRouterProvider) {

		$urlRouterProvider.otherwise('/list');

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

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

提交list.cards-list我可以访问对象（来自模型），但是提交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() {
	'use strict';

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

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

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

		vm.data = {};

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

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

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

Answer 1

您必须使用＆＃34; vm访问您的变量。＆＃34;在你的HTML中 - ＆gt; ＆＃34; {{vm.data}}＆＃34;等

//编辑： 如果你想在不使用＆＃34; vm＆＃34;你必须将变量放入＆＃34; $ scope＆＃34;在你的控制器中。