Question

这是我的简单代码，我正在尝试打开一个模态，并在打开时通过控制器和视图将数据放入内部，但实际上仍然只在模态内打印"{{ i }}"

HTML

    <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');
}
}

Answer 1

不是直接调用模态函数，而是在示波器上创建一个名为modal的方法，并使用ngClick绑定它。

模态应该是一个指令，因为它操纵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);

虽然这应该有用，但如果你考虑为模态创建一个指令会更好。

角度js - 简单控制器 - 视图 - 模态

1 个答案: