AngularJS 和 AngularJS Material 中的范围问题
Scope Problems in AngularJS with AngularJS Material
我一直在尝试创建一个对话框,我可以在其中编辑一些信息。关键是你打开对话框,对话框中已经存在的东西,你可以编辑它然后保存它。我的问题是将信息从普通页面传递到对话框。这是控制器的代码:
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()
函数内的那些变量,它们会正常工作,但在对话框内,它会恢复为函数外描述的原始值。该功能是必需的,具有这些值的对话框也是必需的。提前谢谢大家!
我遇到了类似的情况,并通过让当前控制器兼作 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 的项目注入到对话框的控制器中。然后你会在你的模板中绑定它。
您可以通过该服务传输数据。
例如,假设您在父页面和子页面中都使用一项服务,假设 myService
然后你想从父控制器传递一些数据给子控制器,那么你可以将父控制器中的值设置到服务中,如下所示:
myService.myObject=scope.myObject;
稍后您可以通过服务访问子控制器中的相同对象,如下所示:
$scope.myObject=myService.myObject;
希望对您有所帮助
我一直在尝试创建一个对话框,我可以在其中编辑一些信息。关键是你打开对话框,对话框中已经存在的东西,你可以编辑它然后保存它。我的问题是将信息从普通页面传递到对话框。这是控制器的代码:
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()
函数内的那些变量,它们会正常工作,但在对话框内,它会恢复为函数外描述的原始值。该功能是必需的,具有这些值的对话框也是必需的。提前谢谢大家!
我遇到了类似的情况,并通过让当前控制器兼作 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 的项目注入到对话框的控制器中。然后你会在你的模板中绑定它。
您可以通过该服务传输数据。
例如,假设您在父页面和子页面中都使用一项服务,假设 myService
然后你想从父控制器传递一些数据给子控制器,那么你可以将父控制器中的值设置到服务中,如下所示:
myService.myObject=scope.myObject;
稍后您可以通过服务访问子控制器中的相同对象,如下所示:
$scope.myObject=myService.myObject;
希望对您有所帮助