javascript - AngularJS 与 AngularJS Material 中的范围问题

Question

我一直在尝试创建一个可以编辑一些信息的对话框。重点是，您打开对话框，对话框中已有的内容，您可以对其进行编辑，然后保存。我的问题是将信息从普通页面传递到对话框。这是 Controller 的代码:

export class MainController {
    constructor ($scope, $log, $document, $mdDialog, demosService) {
        'ngInject';

        $scope.addDemo = function (name, html) {
            demosService.addDemo(name, html);
        };

        $scope.removeDemo = function (name, html) {
            demosService.removeDemo(name, html);
        };

        $scope.updateDemo = function (oldName, newName, html) {

        };

        $scope.getDemoInfo = function (name) {

        };

        $scope.getDemos = function () {
            return demosService.getDemos();
        };

        $scope.hide = function () {
            $mdDialog.hide();
        };

        $scope.cancel = function () {
            $mdDialog.cancel();
        };

        $scope.saveNew = function () {
            $scope.addDemo($scope.newdemo.name, $scope.newdemo.html);
            $scope.cancel();
        };

        $scope.loggle = function (log) {
            $log.log(log);
        }

        $scope.saveEdit = function (oldname) {
            //$scope.updateDemo($scope.demo.name, $scope.demo.newname, $scope.demo.newhtml);
            console.log($scope.oldname + ", " + $scope.newname + ", " + $scope.newhtml);
        };

        $scope.showNewDemo = function (ev) {
            $mdDialog.show({
                controller: MainController,
                template: "<form ng-cloak style='width: 800px'><md-toolbar><div class='md-toolbar-tools'><h2 style='color: #fff !important;'>New Demo</h2><span flex></span><md-button class='md-icon-button' ng-click='cancel()'>"
                +         "<i class='material-icons' style='color: #fff !important;'>clear</i></md-button></div></md-toolbar><md-dialog-content>"
                + "<div class='md-dialog-content'><md-input-container class='md-block'><label>Name</label><input ng-model='newdemo.name'></md-input-container></div><md-input-container class='md-block' style='padding-left: 25px; padding-right: 25px;'><label style='margin-left:25px; margin-bottom: 5px;'>HTML</label><textarea ng-model='newdemo.html' rows='5' md-select-on-focus></textarea></md-input-container ></md-dialog-content><md-dialog-actions layout='row'>"
+                         "<span flex></span><md-button ng-click='cancel()'>Cancel</md-button><md-button ng-click='saveNew()'>Save</md-button></md-dialog-actions></form>",
                parent: angular.element($document.body),
                targetEvent: ev,
                clickOutsideToClose: true,
                fullscreen: $scope.customFullscreen
            });
        };

        $scope.newname = "foo";
        $scope.newhtml = "bar";

        $scope.showEditDemo = function () {
            console.log($scope.newname + ", " + $scope.newhtml + ", " + $scope.oldname);
            $mdDialog.show({
                controller: MainController,
                template: "<form ng-controller='MainController' ng-cloak style='width: 800px'><md-toolbar><div class='md-toolbar-tools'><h2 style='color: #fff !important;'>Edit Demo</h2><span flex></span><md-button class='md-icon-button' ng-click='cancel()'>"
                + "<i class='material-icons' style='color: #fff !important;'>clear</i></md-button></div></md-toolbar><md-dialog-content>"
                + "<div class='md-dialog-content'><md-input-container class='md-block'><label>Name</label><input ng-model='newname'></md-input-container></div><md-input-container class='md-block' style='padding-left: 25px; padding-right: 25px;'><label style='margin-left:25px; margin-bottom: 5px;'>HTML</label><textarea ng-model='newhtml' rows='5' md-select-on-focus></textarea></md-input-container></md-dialog-content><md-dialog-actions layout='row'>"
                + "<span flex></span><md-button ng-click='cancel()'>Cancel</md-button><md-button ng-click='loggle()'>Save</md-button></md-dialog-actions></form>",
                parent: angular.element($document.body),
                targetEvent: ev,
                clickOutsideToClose: true,
                fullscreen: $scope.customFullscreen
            });
        };
    }
}

现在，$scope.newname = "foo"; 和 $scope.newhtml = "bar"; 可以工作，但问题是我需要改变这些通过作用域函数实现，即:

$scope.setVariables = function (name, html) {
    $scope.newname = name;
    $scope.newhtml = html;
}

如果您尝试从函数内部 console.log() 这些变量，它们会正常工作，但从对话框内部，它会恢复为函数外部所述的原始值。该功能是必需的，并且具有这些值的对话框也是必需的。提前谢谢大家!

Answer 1

我有一个类似的场景，并通过让当前 Controller 兼作 mdDialog 的 Controller 来解决它。这是我使用的代码:

        var me = this
        this.$mdDialog.show({
            templateUrl: "components/listFilter/listFilterDialog.html",
            targetEvent: $event,
            parent: parentEl,
            controller: function () { return me },
            controllerAs: '$filterController',
            clickOutsideToClose: true,
            escapeToClose: true
        })

我没有使用 $scope，因为首先，这很糟糕。 :) 如果您使用controllerAs 或更好的组件，您将获得更多的 yield 。

话虽这么说，我想如果你使用类似的东西:

var thisScope = $scope
$mdDialog.show({
                controller: MainController,
                template: "...",
                locals: { data: thisScope}
                parent: angular.element($document.body),
                targetEvent: ev,
                clickOutsideToClose: true,
                fullscreen: $scope.customFullscreen
            });

我认为它会起作用或接近。这会将名为 data 的项目注入(inject)到对话框的 Controller 中。然后您将在模板中绑定(bind)到它。