我有一个Angular应用程序,其中包含一个包含iframe的路径.iframe加载表单.在第一次加载路径时,您可以在表单中输入数据.在路径的第二次加载时,表单输入无法重新关注IE11中的单击.适用于Chrome和Firefox.
重新创建的具体步骤如下:
我注意到,如果您在输入文本后单击"主页"链接,则单击iframe链接,表单可以重新获得焦点,从而允许输入新文本.
下面是重新创建问题的示例代码.你可以在这里看到它:http://matthewriley.github.io/iframe-form/.
请注意,控制器根据标志强制重新加载路径.这是为了支持业务要求,即如果用户在iframe中并选择单击iframe链接,则路由将完全重新加载.
是什么原因导致IE11阻止iframe中的表单重新关注第二次加载？
HTML页面
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Iframe Reload Test</title>
</head>
<body>
<div ng-app="IframeTest">
<p><span><a href="#/">Home</a></span> <span><a href="#/iframe">Iframe</a></span></p>
<div ui-view></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</body>
</html>
角度应用程序
// app.routes.js
(function() {
'use strict';
angular
.module('IframeTest', [
'ui.router',
'IframeTest.iFrameModule'
])
.config(routeConfig);
routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url:'/',
template: '<h4>Home</h4><p>This is the home page.</p>'
}) …javascript iframe internet-explorer angularjs angularjs-directive
我有一个Angular 1.5.3组件似乎没有更新双向绑定的值.我的控制器更改传递给组件的值.
当控制器初始化时,该组件似乎读取默认值,但之后就像是单向绑定一样.未在组件中读取对绑定值的任何未来更改.
我从一个类似的功能指令转换它,双向绑定工作得很好.是否存在变更事件或类似事件,我缺少组件？我是否需要向组件控制器添加特定逻辑,以便组件模板可以读取绑定值？
实现组件的菜单模板:
<div data-ng-controller="MenuCtrl as ctrl">
<!-- below shows ctrl values updating when controller changes them -->
<pre>{{ctrl.menu}}</pre>
<pre>{{ctrl.settings}}</pre>
<!-- changes not reflected in component -->
<my-sub-menu menu="ctrl.menu" settings="ctrl.settings"></my-sub-menu>
</div>
子菜单组件:
(function () {
'use strict';
angular
.module('myApp.components')
.component('mySubMenu', {
bindings: {
menu: '=',
settings: '='
},
templateUrl: 'subMenu.component.html',
controller: function () {
// implementation that reads menu and settings
}
});
})();
简化的子菜单组件模板:
<ul>
<li ng-show="settings.menu1"><a href="/">Menu 1</a></li>
<li ng-show="settings.menu2"><a href="/">Menu 2</a></li>
<li ng-show="settings.menu3"><a href="/">Menu 3</a></li> …javascript angularjs angularjs-directive angularjs-components