2016-08-25 93 views
0

這是我第一次嘗試AngularUI Modal。AngularUI Modal控制器錯誤

有一個不斷的錯誤:controller as vm是不是一個函數,得到了undefined。

這裏是我的部分:

<div class="container" ng-controller="controller as vm"> 
<script type="text/ng-template" id="hello.html"> 
    <div class="modal-header"> 
    <h3 class="modal-title" id="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body" id="modal-body"> 
    hello 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-primary" type="button" ng-click="vm.ok()">OK</button> 
    <button class="btn btn-warning" type="button" ng-click="vm.cancel()">Cancel</button> 
    </div> 
</script> 

<button type="button" class="btn btn-default" ng-click="vm.open()">Open me!</button> 

控制器:

app.controller('controller',[function($uibModal,$log) 
{ 
var vm = this; 
vm.animationsEnabled = true; 

vm.open = function() { 
var modalInstance = $uibModal.open({ 
    animation: vm.animationsEnabled, 
    ariaLabelledBy: 'modal-title', 
    ariaDescribedBy: 'modal-body', 
    templateUrl: 'hello.html', 
    controller: 'Modalcontroller', 
    //controllerAs: 'vm', 


    }) 
}; 
}]); 

app.js

var app=angular.module("myapp",['ui.router', 'ui.bootstrap']); 

... 

    .state("user", { 
    url: "/user", 
    views: { 
     "main": { 
     templateUrl: "partials/user.html", 
     controller: "controller", 
     controllerAs: "vm", 
     } 
    } 
}); 
+1

你使用哪個版本的角?爲什麼你在封閉的頁面視圖中使用相同的控制器,以及模態?這沒有什麼意義。另外,由於控制器已經在狀態定義中指定,因此在視圖中再次指定它將創建兩個實例,而不是一個。從視圖中刪除它。 –

+0

我正在使用angular 1.5,並按照您的說法進行相應編輯。 – uttejh

+1

用'function($ uibModal,$ log)'或'['$ uibModal','$ log'替換'[function($ uibModal,$ log)''功能($ uibModal,$日誌)'。如果你需要縮小的話,最好是第一個,並且使用ng-annotate在構建期間自動轉換爲第二個表單。 –

回答

0

我創建了plunkr。請看看

(https://plnkr.co/edit/6fx26BVrXu0ud8TkvrMq?p=preview) 

myApp.controller('ModalController', ['$scope', '$uibModalInstance', '$uibModal', '$state', function($scope, $uibModalInstance, $uibModal, $state) { 
     var self = this; 
     self.cancel = function(){ 
      $uibModalInstance.dismiss(); 
     }; 

    }]); 
    myApp.controller('userController', ['$scope', '$uibModal', '$state', function($scope, $uibModal, $state) { 
     var self = this; 
     self.animationsEnabled = true; 

     self.open = function(){ 

     var modalInstance = $uibModal.open({ 
       animation: self.animationsEnabled, 
       ariaLabelledBy: 'modal-title', 
       ariaDescribedBy: 'modal-body', 
       templateUrl: 'hello.html', 
       controller: 'ModalController', 
       controllerAs: 'vm' 

      }); 
     }; 
    }]);