Javascript 模式窗体未在单击时打开

我有下面的html，试图在点击按钮时打开一个模式表单。代码创建的按钮很好，但单击它什么都不做

为什么按钮不能打开表单

var myMod=angular.module（'plunker'，['ui.bootstrap']）；
var ModalDemoCtrl=函数（$scope、$modal、$log）{
$scope.items=['item1'，'item2'，'item3']；
$scope.open=函数（）{
var modalInstance=$modal.open({
templateUrl:'myModalContent.html'，
控制器：ModalInstanceCtrl，
决心：{
项目：功能（）{
返回$scope.items；
}
}
});
modalInstance.result.then（函数（selectedItem）{
$scope.selected=selectedItem；
}，函数（）{
$log.info（'Modal disposed at:'+new Date（））；
});
};
};
var ModalInstanceCtrl=函数（$scope、$modalInstance、items）{
$scope.items=项目；
$scope.selected={
项目：$scope.items[0]
};
$scope.ok=函数（）{
$modalInstance.close（$scope.selected.item）；
};
$scope.cancel=函数（）{
$modalInstance.disclose（'cancel'）；
};
};

我是模态的！


{{item}}


选定：{{Selected.item}
好啊
取消
GWAT网站和设计
提交新职位
我做了以下更改：

包括

添加
ng app=“plunker”
注册控制器：
myMod.controller（'ModalDemoCtrl'，ModalDemoCtrl'）
myMod.controller（'ModalInstanceCtrl'，ModalInstanceCtrl'）

添加
Selected:{{Selected}
以从模式视图查看所选项目
将
$modal
更改为
$uibModal
，
$modalInstance
更改为
$uibModalInstance

var myMod=angular.module（'plunker'，['ui.bootstrap']）；
var ModalDemoCtrl=函数（$scope、$uibModal、$log）{
$scope.items=['item1'，'item2'，'item3']；
$scope.open=函数（）{
var modalInstance=$uibModal.open({
templateUrl:'myModalContent.html'，
控制器：ModalInstanceCtrl，
决心：{
项目：功能（）{
返回$scope.items；
}
}
});
modalInstance.result.then（函数（selectedItem）{
$scope.selected=selectedItem；
}，函数（）{
$log.info（'Modal disposed at:'+new Date（））；
});
};
};
var ModalInstanceCtrl=函数（$scope，$uibModalInstance，items）{
$scope.items=项目；
$scope.selected={
项目：$scope.items[0]
};
$scope.ok=函数（）{
$uibModalInstance.close（$scope.selected.item）；
};
$scope.cancel=函数（）{
$uibModalInstance.discover（'cancel'）；
};
};
myMod.controller（'ModalDemoCtrl'，ModalDemoCtrl'）；
myMod.controller（'ModalInstanceCtrl'，ModalInstanceCtrl'）

我是模态的！


{{item}}


选定：{{Selected.item}
好啊
取消
GWAT网站和设计
已选定：{{Selected}

提交新职位
我做了以下更改：

包括

添加
ng app=“plunker”
注册控制器：
myMod.controller（'ModalDemoCtrl'，ModalDemoCtrl'）
myMod.controller（'ModalInstanceCtrl'，ModalInstanceCtrl'）

添加
Selected:{{Selected}
以从模式视图查看所选项目
将
$modal
更改为
$uibModal
，
$modalInstance
更改为
$uibModalInstance

var myMod=angular.module（'plunker'，['ui.bootstrap']）；
var ModalDemoCtrl=函数（$scope、$uibModal、$log）{
$scope.items=['item1'，'item2'，'item3']；
$scope.open=函数（）{
var modalInstance=$uibModal.open({
templateUrl:'myModalContent.html'，
控制器：ModalInstanceCtrl，
决心：{
项目：功能（）{
返回$scope.items；
}
}
});
modalInstance.result.then（函数（selectedItem）{
$scope.selected=selectedItem；
}，函数（）{
$log.info（'Modal disposed at:'+new Date（））；
});
};
};
var ModalInstanceCtrl=函数（$scope，$uibModalInstance，items）{
$scope.items=项目；
$scope.selected={
项目：$scope.items[0]
};
$scope.ok=函数（）{
$uibModalInstance.close（$scope.selected.item）；
};
$scope.cancel=函数（）{
$uibModalInstance.discover（'cancel'）；
};
};
myMod.controller（'ModalDemoCtrl'，ModalDemoCtrl'）；
myMod.controller（'ModalInstanceCtrl'，ModalInstanceCtrl'）

我是模态的！


{{item}}


选定：{{Selected.item}
好啊
取消
GWAT网站和设计
已选定：{{Selected}

提交新职位
能否尝试在
open
函数的作用域之外定义
modalInstance
？不确定是否需要变量
modalInstance
只是
$modal.open（）。那么
应该可以工作。您可以尝试在
open
函数的范围之外定义
modalInstance
吗？不确定您是否需要变量
modalInstance
只是
$modal.open（）.那么
应该可以工作了。非常感谢你的帮助。如果我理解正确的话，我对模态形式现在的工作原理基本上有些过时了？是的，只有较旧版本的ui引导库使用了
$modal
和
$modalInstace
非常感谢您的帮助，所以如果我理解正确的话，我对模态表单现在的工作方式基本上有些过时了？是的，只有较旧版本的ui引导库使用了
$modal
和
$modalInstace