当使用控制器作为语法时,控制器值不会在html中绑定

时间:2016-12-01 06:05:25

标签: javascript angularjs angular-material

我使用控制器作为语法,并尝试在按钮单击

上将数据加载到模态

HTML:

<md-dialog ng-cloak class="promptIncludeExclude-options">
<md-toolbar class="promptIncludeExclude-header">
    <div class="md-toolbar-tools">
        <span class="title">{{vm.title}}</span>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="dialogCartController.closeDialog()">
            <span class="close-dialog">&#10005;</span>
        </md-button>
    </div>
</md-toolbar>
<md-dialog-content>
    {{vm.body}}
</md-dialog-content>
<md-dialog-actions layout="row">
    <div flex="25" flex-offset="25"><md-button ng-click="dialogCartController.closeDialog()" >{{vm.button1}}</md-button></div>
    <div flex="50" flex-offset="20" ><md-button ng-click="dialogCartController.closeDialog()">{{vm.button2}}</md-button></div>
</md-dialog-actions>

JS:

(function() {
    'use strict';

    module.exports = ['$mdDialog', 'items', function($mdDialog, items) {
        debugger
        var vm = this;
        var data = [{
                "id": 1,
                "title": "Product Inclusion Notification",
                "body": "something",
                "button1": "proceed",
                "button2": "No Thanks"
            }

        ];
        angular.forEach(data, function(value, key){
            if(value.id==parseInt(items)){
                vm.title=value.title;
                vm.body=value.body;
                vm.button1=value.button1;
                vm.button2=value.button2;
            }
        });
        vm.closeDialog = function() {
            $mdDialog.hide();
        };

    }];
})();
按钮点击功能

vm.handleCartOptions = function(data) {debugger

        $mdDialog.show({
            clickOutsideToClose: false,
            scope: $scope, // use parent scope in template
            preserveScope: true, // do not forget this if use parent scope
            template: require('./promptIncludeExcludeDialog/promptIncludeExclude.dialog.html'),
            controller: require('./promptIncludeExcludeDialog/promptIncludeExclude.dialog.js'),
            controllerAs: "dialogCartController",
            locals: {
                items: data// on click button value
            }
        });

    }

但是标题,正文和按钮的值并没有被绑定到html

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:3)

您定义了controllerAs: "dialogCartController"但尝试引用vm.title

请尝试dialogCartController.titlecontrollerAs: "vm"