也许这是一个有角色的错误,但我觉得我对这里的某些东西有效并且我的google-fu失败了我有一个根本的误解。
我有一个非常简单的DOM,它动态加载为局部视图。页面的其余部分不使用角度。 DOM上还有一个ng-app。
<div class="partialContainer bootstrap" id="dataEntryTab" ng-controller="mainController">
<div ng-model="$scope">
<p>Target types: {{targetTypes}}</p>
<ul ng-repeat="tt in targetTypes">
<li>
<h2>{{tt.DisplayName}} Targets</h2>
<ul class="targetList" ng-repeat="t in targetsOfType(tt.Name)">
<li>
<span>{{t.Name}}</span><span>{{t.EnteredData.length}} trials</span>
<span ng-repeat="d in enteredData">
<span>{{d}}</span>
</span>
</li>
</ul>
</li>
</ul>
</div>
<button ng-click="addData()">Enter Data</button>
</div>
当部分视图加载时,此函数会触发,据我所知,它会产生角度滚动:
$('#dataEntryTab').live('tabLoad', () => {
var invoker = $compile => {
var scope = angular.element('#dataEntryTab').scope();
$compile('#dataEntryTab')(scope);
}
invoker.$inject = ['$compile'];
angular.element('#content-wrapper-1').injector().invoke(invoker);
});
我遇到的问题是,在这行上没有ng-model:
<div ng-model="$scope">
它下面的ng-repeat呈现为空。我认为问题是它被绑定不正确,或者范围是错误的。但是,我太过于棱角分明,无法弄清楚哪个或如何解决它。
我知道我不知道的一件事是角度如何匹配DOM和控制器之间的范围。
作为参考,这是控制器代码(在typescript中):
var mainController = ($scope: IMainScope, targetTypeFilter: ITargetTypeFilterFunc, ngDialog: IDialog, dataEntry: IDataEntryService) => {
$scope.targetsOfType = (targetType: string) => {
return targetTypeFilter(dataEntry.enteredData, targetType);
};
$scope.addData = () => {
ngDialog.open({
template: 'addDataDialog',
scope: $scope
});
};
$scope.targetTypes = [
new TargetType('DTT', 1, 'DTT'),
new TargetType('TaskAnalysis', 3, 'Task Analysis'),
new TargetType('Duration', 4, 'Duration'),
new TargetType('Frequency', 5, 'Frequency'),
new TargetType('Toileting', 6, 'Toileting'),
new TargetType('Fluency', 7, 'Fluency'),
new TargetType('Quantity', 8, 'Quantity'),
new TargetType('Anecdotal', 9, 'Anecdotal'),
new TargetType('GroupedFrequency', 14, 'Grouped Frequency'),
];
};