AngularJS Material mdDialog并在模板中显示本地

时间:2017-08-17 18:09:24

标签: javascript angularjs angularjs-controlleras angularjs-material

生成mdDialog的控制器的一部分看起来像

$scope.removeAttendee = function(item) {

    console.log(item);

    $mdDialog.show({
        controller: DialogController,
        templateUrl: 'views/removeMsg.tmpl.html',
        parent: angular.element(document.body),
        clickOutsideToClose:true,
        controllerAs: 'ctrl',
        fullscreen: $scope.customFullscreen, // Only for -xs, -sm breakpoints.
        locals: {item: item}
    })

mdDialog的控制器:

function DialogController($scope, $mdDialog) {

    var attendee = this;

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

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

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

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

}

removeMsg.tmpl.html有该代码

<p>You are going to remove {{ ctrl.item.firstName }} {{ ctrl.item.lastName }} from the lunch list.</p>

但即使我将代码更改为像

这样的简单代码,我也无法显示相关值
locals { item: "test" }

的相关部分
{{ ctrl.item }}

为什么我没有显示这些值的任何建议?

1 个答案:

答案 0 :(得分:2)

由于您将DialogControllercontrollerAs别名一起使用,因此应将已解析的值分配给控制器上下文item变量

function DialogController($scope,$mdDialog,item){//Item value will resolve via locals
    var attendee = this;
    attendee.item = item; // this line is important.

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

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

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

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

除此之外,请转换$scope方法以使用attendee(this)。由于controllerAs模式不鼓励在控制器中使用$scope