javascript - Angular IE8 attrs.$set/element.attr 不起作用

标签 javascript html angularjs internet-explorer-8

我将自己的标签转换为输入。 我可以使用 select 为输入选择只读/禁用。 我做到了。有用。但不是在 ie8 )).

我阅读了 Angular 和 IE8 的官方文档。 我添加了它。但是我的应用程序在 ie8 中不工作。

我不能添加只读/禁用属性(readonly="readonly"and disabled="disabled")

plunker

<!DOCTYPE html>
<html xmlns:ng="angularjs.org" id="ng-app" ng-app="dir">
<head>
<!--[if lt IE 8]>

    <script src="html5shiv.js"></script>
<![endif]-->

<!-- Internet Explorer AngularJS element creation -->
<!--[if lte IE 8]>
    <script>
        document.createElement('dhtmlxdate');
    </script>
    <script src="http://cdnjs.cloudfare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
<![endif]-->
    <meta charset="utf-8" />
    <title>ie8</title>

</head>
<body>

<tag mode="{{mode}}"></tag>

<select ng-model="mode">
    <option>disabled</option>
    <option>readonly</option>
</select>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script>
var myapp = angular.module("dir", []);
    myapp.directive('tag', function(){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: false,
      template: '<input type="text" />'
        ,

        link: function(scope, element, attrs) {

            attrs.$observe('mode', function(value) {
                switch(value) {
                    case "disabled":
                        //attrs.$set('disabled', 'disabled');
                        element.attr('disabled', 'disabled');
                        element.removeAttr('readonly');
                        break;
                    case "readonly":
                        //attrs.$set('readonly', 'readonly');
                        element.attr('readonly', 'readonly');
                        element.removeAttr('disabled');
                        break;
                }
            });

        }
            };
        }); 

    </script>
</body>
</html>

最佳答案

首先,如果你想避免将来遇到巨大的麻烦,特别是如果你需要 IE 支持,最好建议你像这样手动引导你的 Angular 应用程序:

angular.element(document).ready(function() {
    angular.bootstrap(document, ['yourAppName']);
});

至于您的实际问题,“只读”和“禁用”属性都是 bool 属性,这意味着您不必为它们设置值,因为只要它们存在在元素上,它们将生效。

就是说,如果您想在输入中有条件地设置它们,我建议您使用 ngReadonlyngDisabled

工作示例:http://plnkr.co/edit/zEmA0AjJB5AoonLKCM7C

关于javascript - Angular IE8 attrs.$set/element.attr 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23805696/

相关文章:

javascript - 在树状 angularjs 模型中检索对象

javascript - 如何在 AngularJS ui-grid 中自动调整列宽

javascript - 一键两种不同的 Action

javascript - Node js readline不断评估输入并返回错误

javascript - 如何比较两个打乱的字符串?

html - iphone 中的 Gmail 应用忽略 "font-size"的 html 邮件并将其更改为 13px

javascript - 如何使用 Javascript 更改 json 对象的结构

javascript - 带有 Firefox Web 扩展插件的 Firebase 身份验证

html - 样式链接未居中

javascript - 从下拉选项中删除破折号和任何文本