指令模板未在模式输入上呈现
Directive template not rendering on modal input
我有一个角度引导模式,我为其创建了一个自定义指令,以便输入字段将在打开时自动聚焦。我已经将指令模板添加到我的输入标签中,但在检查元素上,它无处可见。法典:
指令(复制自:如何在输入字段上设置焦点?
'use strict';
angular.module('portfolioManager.directives', []).directive('focusMe', function($timeout, $parse) {
return {
//scope: true, // optionally create a child scope
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
console.log('value=',value);
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// to address @blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function() {
console.log('blur');
scope.$apply(model.assign(scope, false));
});
}
};
});
.HTML:
<div class='panel-heading report'>
<h1 class='port-title port-manager-header title custom-inline'>Portfolios</h1>
<div ng-controller="ModalCtrl" class='create-new-frame'>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">New Portfolio</h3>
</div>
<form name='eventForm'>
<div class="modal-body">
<input class='form-control' ng-model='portfolios.portName' placeholder='Portfolio name' ng-required='true' maxlength="35" focus-me="shouldBeOpen">
<span class="help-inline" ng-show="notUnique">Portfolio name already used</span>
<br>
<div ng-init="radioModel = 'Right'; portfolios.groupSelection = false" class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = true' btn-radio="'Left'">Group</label>
<label class="btn btn-primary" ng-model="radioModel" ng-click='portfolios.groupSelection = false' btn-radio="'Right'">Private</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(portfolios.portName)" ng-disabled="eventForm.$invalid || notUnique" id='portfolio-modal-create-button'>Create</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button class="btn btn-sm btn-primary create-new-frame-btn" ng-click="open('sm')">Create New</button>
</div>
</div>
模态控制:
'use strict';
angular.module('portfolioManager').controller('ModalCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
您需要以某种方式在代码中创建模态并触发它以显示。您刚刚定义了模板,现在您必须使用它。请参阅 http://angular-ui.github.io/bootstrap/#/modal
文档中的示例:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
使用 templateUrl 属性链接到模式模板,并创建一个触发器以从 UI 调用open
(例如:<span ng-click="open()">Open Modal</span>
)。
相关文章:
- 使用模式格式化Number类型输入中的值
- Html<输入模式>使用JavaScript处理-超过时失败
- 为什么除了html5输入模式属性之外,这个简单的regex在任何地方都能工作
- 输入元素模式属性的Javascript正则表达式在reFiddle上有效,但在页面上无效
- IE8:模式弹出窗口中的文本输入不会;t显示键入的文本
- 如何显示/绘制以数字作为输入的屏幕锁定模式
- 为什么ng模式获胜't对来自非用户输入事件的更改进行正确验证
- 模式和输入组插件中的Bootstrap popover
- 其他类型的文件上传中的输入模式
- 我如何在文本输入字段中输入数字,而无需在 JavaScript 或 jQuery 中输入模式
- 输入模式应用程序状态,直到下次使用 Jquery 单击
- 带有输入模式的 Javascript 数字和逗号
- 为什么输入模式属性不适用于数字
- 使用 Html 输入模式 (500/600)
- 输入模式属性以更改输入框的颜色
- 输入模式允许多个标签,用空格分隔(#one #two)
- HTML5输入模式不区分大小写
- 将Regex对象分配给html输入模式
- Regex模式不能用于输入模式匹配
- CKEditor Chrome中的输入模式问题