范围绑定在模态弹出窗口angularjs中不起作用

Posted 2023-05-08

【中文标题】范围绑定在模态弹出窗口angularjs中不起作用

【英文标题】：Scope binding not working in modal popup angularjs

【发布时间】：2015-05-23 14:12:12

【问题描述】：

我正在使用 Angular 将数据绑定到我的 UI，效果非常好。但是当按钮单击时调用模态弹出窗口时，模态中的绑定不起作用。

<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">checkItem</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button ng-click="saveClient()" class="btn btn-primary pull-right btn-tabkey"><i class="fa fa-save"></i>Save</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="focusInput=false"><i class="fa fa-ban"></i>Cancel</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

角度：

angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) 

    $scope.checkItem = "";

    $scope.loadEditForm = function () 
        $scope.checkItem = "yes";
        $("#modal-form-edit").modal();
    ;


]);

【问题讨论】：

模态是指令吗？如果是这样，指令有自己的范围

它不是指令。

【参考方案1】：

似乎您正在使用普通的 jQuery 方法打开模式。这在 Angular 中不起作用，因为打开的 modal 没有连接到 Angular 应用程序，所以它不知道必须处理 modal，html 解析等。

相反，您应该正确使用指令，或者在模态对话框的情况下，您可以简单地使用现有的指令，例如 Angular UI 项目，它为 Angular 带来了现成的 Bootstrap 指令。在您的情况下，您需要$modal 服务。

那么用法就很简单了：

// remember to add ui.bootstrap module dependency
angular.module('myModule', ['ui.bootstrap']); 

angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", "dataService", function ($rootScope, $scope, $filter, $modal, dataService) 

    $scope.checkItem = "";

    $scope.loadEditForm = function () 
        $scope.checkItem = "yes";
        $modal.open(
            templateUrl: 'modal.html',
            controller: 'modalController',
            scope: $scope
        );
    ;

]);

演示： http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

【讨论】：

ui.bootstrap引用了什么js文件？

检查更新的答案，我添加了如何配置所有内容的演示。

你好@dfsq 我忘了包括我正在使用.net MVC。如何在templateUrl 中调用部分视图？

不是 .NET 专家，所以无法回答这个问题。但是您需要提供可下载资源的 URL。这意味着如果您在浏览器中访问此 url，它会下载模板 HTML 文件。

好的。你真的帮了大忙。谢谢

【参考方案2】：

您需要在 modal-dialog div 标签中指定ng-controller。

<div class="modal-dialog" **ng-controller="myController"**>
.
.
.
.
.

更新

我认为您在控制台窗口中遇到了以下错误

模块“myModule”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

所以请把nangular.module('myModule')改成angular.module('myModule',[])

在 js 代码下面试试这个，而不是你的代码和我上面的更改

angular.module('myModule',[]).controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) 

    $scope.checkItem = "";

    $scope.loadEditForm = function () 
        $scope.checkItem = "yes";
        $("#modal-form-edit").modal();
    ;


]);

【讨论】：

我认为你有任何控制台错误，请验证它

【参考方案3】：

您的模式（例如 - bootstrap modal ）可能在 ng-controller 指令之外