Angular js - 简单控制器 - 视图 - 模态
Posted
技术标签:
【中文标题】Angular js - 简单控制器 - 视图 - 模态【英文标题】：Angular js - simple controller - view - modal 【发布时间】：2014-01-22 13:24:08 【问题描述】：这是我的简单代码，我正在尝试打开一个模态，并在打开时通过控制器和视图将数据放入其中，但实际上仍然只在模态中打印" i "
<body ng-controller="AppController">
<div id="modal">
<div id="modal-content"></div>
</div>
<button class="btn btn-option" onclick="modal(src:'views/layout/modals/modal.html');">
open
</button>
</body>
modal.html：
<div ng-repeat="i in config.app_genres.genres">
i
</div>
app.js：
.controller('AppController', function($scope,$location,$http)
$scope.config = ;
$scope.config.app_ws = "http://localhost/And/www/";
$scope.config.app_name = "Appname";
$scope.config.app_short_description = $scope.config.app_name+" helps you go out with your rabbit";
$scope.config.app_motto = "hey ohhhhhhhhhh <i class='icon-check'></i>";
$scope.config.app_url = $location.url();
$scope.config.app_path = $location.path();
$http.get($scope.config.app_ws+'jsons/json.json').success(function(response)
$scope.config.app_genres = response;
);
modal() js函数：
function modal(_options)
/*
options =
html:html to load,
src: false | url
*/
var modal = document.getElementById('modal'),
modal_content = document.getElementById('modal-content');
if(_options)
if(_options.html)
modal_content.innerHTML = _options.html;
show(modal);
if(_options.src)
_load(_options.src,modal_content) ;
show(modal);
else
console.log('Please set modal options');
【问题讨论】：
【参考方案1】：不要直接调用 modal 函数，而是在你的作用域上创建一个名为 modal 的方法并使用 ngClick 绑定它。
Modal 实际上应该是一个指令，因为它操纵 DOM，但简而言之，您没有看到 i 解析的原因是因为 HTML 没有被编译。 Angular 编译它知道的 HTML，但在这个例子中，你在 Angular 之外创建了一个新的 HTML 块。
从控制器中，您可以创建方法来构建它，然后执行以下操作：
// create a scope from the modal that inherits from the parent scope because it accesses properties there
var modalScope = $scope.new();
// be sure to inject the compiler service: function($scope,$location,$http,$compile)
var element = angular.element(modal_content);
$compile(element.contents())(modalScope);
虽然这应该可行，但如果您考虑为模态创建指令会更好。
【讨论】：
是的，但是如何将不同的 html src 注入模态并切换模态（隐藏/显示）？ :( 你看过 angular.ui 吗？他们提供了一个对话服务，我相信......你也可以使用任何第三方，如 jQuery 等。 不，我只是使用 Angular + js，实际上我想保持轻量级：D 我理解轻量级。也许看看github.com/btford/angular-modal 以获得灵感 - 否则它似乎是一个指令或至少一个服务是有序的。 伙计，你不能做一个你在说什么的活生生的例子吗，我只是想理解它看起来像代码但很难，无论如何非常感谢你以上是关于Angular js - 简单控制器 - 视图 - 模态的主要内容，如果未能解决你的问题，请参考以下文章
如何在控制器中将函数的输出显示为angularjs中的嵌套视图