【发布时间】：2018-04-29 17:19:52
【问题描述】：
我正处于 AngularJS 边做边学的阶段，对此我无法弄清楚也无法找到答案。
我在做什么：
在 ng-click 上，我在控制器中调用一个函数，即 $http-loads html-content（一些 div 和一个表单），我将其“粘贴”到模板中 div 内的 ng-bind-html。
这很好 - 但我的问题是，我无法在加载的数据中为 ng-models 或 {{someText}} 设置值。我在 div 内的元素上得到“未定义”（具有随机内容的模态 div，因此不是我模板的静态部分）。
我没有使用 Bootstrap 或类似的东西。
我可以做些什么来使数据成为我范围的一部分 - 或者以另一种方式实现我想要的（具有随机内容的模态 div）？
如果对您有帮助，我可以发布一些代码。当你回答时请记住，我是一个完全新手！ :-)
-
我的指令：
workApp.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
transclude: true,
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.boxWidth) scope.dialogStyle.width = attrs.boxWidth;
if (attrs.boxHeight) scope.dialogStyle.height = attrs.boxHeight;
scope.hideModal = function() {
scope.show = false;
};
},
templateUrl: 'app/tpl/modal.html'
};
});
州：
.state('main', {
abstract: true,
templateUrl: tplMain
})
// PROJECTS
.state('main.projects', {
url: '/projects',
templateUrl: 'app/views/projects/project-list.html',
controller: 'projectListCtrl'
})
.state('main.projectdetails', {
url: '/projects/:projectId/details',
templateUrl: 'app/views/projects/project-details.html',
controller: 'projectDetailsCtrl'
})
HTML（嵌套视图）：
<!-- main -->
<div ui-view>
<!-- main.projects -->
<div ui-view>
<a ng-click="newProject()">New project</a>
</div>
</div>
<modal-dialog>{{message}}</modal-dialog>
控制器：
workApp.controller('projectListCtrl', function($scope, $rootScope, $http) {
$scope.newProject = function() {
$scope.message = '<div>Some HTML here...</div>'; // Loaded from $http.get
$scope.modalOpen = true;
}
});
我的两个问题中的第一个是，当我调用 newProject() 时模式没有显示。我认为这是因为状态/嵌套视图（我的模式对话框在另一个视图中）？如果我将模式对话框复制到我的 main.projects 状态，它就可以工作。
第二个是{{message}}不能包含绑定，所以我无法绑定fx。 $scope.modal.title 到 HTML 中的 {{modal.title}}。
更新：
我找到了一个动态包含 html 文件的工作示例：
<div id="modal" ng-class="{ open: modal.data.visible }" ng-include="'app/views/' + modal.data.include"></div>
在控制器中：
$scope.modal.data = {
include: 'projects/project-data.html',
visible: true,
title: 'New project',
subtitle: 'Enter project data',
projectName: 'My first project',
projectCompany: 'The Project Company'
}
这似乎工作得很好 - 但与指令相比，这是不好的做法（我仍然无法开始工作）。
【问题讨论】：
-
你可能想要一个可以
$compile它的指令 -
定义模型的控制器是否连接到调用它们的 html 元素？前任。
-
我找到了一个更简单的版本，它将 $scope 中的消息绑定到模态，我在代码中进行了修改，看看是否有帮助。