AngularJS 和 AngularJS Material 中的范围问题

Question

我一直在尝试创建一个对话框，我可以在其中编辑一些信息。关键是你打开对话框，对话框中已经存在的东西，你可以编辑它然后保存它。我的问题是将信息从普通页面传递到对话框。这是控制器的代码：

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

我遇到了类似的情况，并通过让当前控制器兼作 mdDialog 的控制器来解决它。这是我使用的代码：

        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 或更好的组件，您将获得更多里程。

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

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

我认为它会起作用或接近。这会将一个名为 data 的项目注入到对话框的控制器中。然后你会在你的模板中绑定它。

Answer 2

您可以通过该服务传输数据。

例如，假设您在父页面和子页面中都使用一项服务，假设 myService

然后你想从父控制器传递一些数据给子控制器，那么你可以将父控制器中的值设置到服务中，如下所示：

myService.myObject=scope.myObject;

稍后您可以通过服务访问子控制器中的相同对象，如下所示：

$scope.myObject=myService.myObject;

希望对您有所帮助

AngularJS 和 AngularJS Material 中的范围问题

Scope Problems in AngularJS with AngularJS Material

javascript

angularjs

angularjs-scope

angular-material