【发布时间】：2014-08-14 23:18:45
【问题描述】：
Angular JS 在 IE11 和 FireFox 中完美绑定，没有错误。但在 Chrome 中，仍然没有错误，UI 控件中的绑定失败，但在平面文本转储中，它呈现正常。
铬 火狐 IE11 Safari 虽然我没有图片，但绑定也可以在 Safari 中使用。
我怀疑这一定是脚本冲突，但我似乎找不到。 这是我正在加载的脚本，按加载顺序排列。
- jquery-{version}.js
- jquery-ui-{version}.js
- Common.js //JavaScript 数组的 IE 8 和 9 兼容性原型
- moment.js
- moment-timezone.js
- toastr.js
- angular.js
- angular-route.js
- angular-resource.js
- 角递归.js
- angular-loader.js
- angular-animate.js
- angular-cookies.js
- angular-sanitize.js
- angular-scenario.js
- angular-touch.js
- angular-draganddrop.js
- ui-bootstrap.js
- ui-bootstrap-tpls.js
- ui-utils.js
- ui-utils-ieshiv.js
- textAngular.js
- textAngular-sanitize.js
- app.js //我的代码
- textAngularSettings.js /我的设置
我的这个控件的数据结构是：
task.details {
buttonLabel:false,
correctiveActionSection:true,
correctiveActionTitle:"Corr Title",
correctiveLabel:"Corr Lbl",
deficiencyLabel:"Def Lbl",
inspect:true,
inspectionFailedLabel:"Insp Fail",
inspectionPassedLabel:"Insp Pass",
inspectionTitle:"Ins Title",
inspectionUntestedLabel:"Inspect Untest",
instance:[],
notCleanedLabel:"Cleaned",
noWorkLabel:"No Work",
recleanedLabel:"Recleaned",
role:{},
showCorrectiveText:true,
showDeficiencyText:true,
sop:{},
suppression:{},
items:[
{name:"a"},
{name:"aa"},
{name:"aaa", causeException:true},
{name:"aaaa", causeException:true},
{name:"aaaaa", causeException:true}
],
inspection:{
untested:"Inspect Untest",
passed:"Insp Pass",
failed:"Insp Fail"}}
我的绑定看起来像
<label class="btn btn-default"
ng-click="InspectClick('TestKey1', false)">
{{task.details.inspection.untested}}
<input type="radio" ng-checked="testKey1"
ng-disabled="!testDisable1" />
</label>
控制器：
(function () {
'use strict';
var controllerId = 'PreOpCtrl';
angular.module('app').controller(controllerId,
['$scope', buildPreOpCtrl]);
function buildPreOpCtrl($scope) {
//task already exists, this is known because of this working on all other browsers.
$scope.task.details = processDetails($scope.sourceData);
$scope.InspectClick = InspectClick(svalue, bvalue);
}
function processDetails(details) {
var ret = details;
//Convert stringify to objects
var i = ret.items;
var t = JSON.parse(i);
delete ret.items;
ret.items = t;
//correct bools
ret.showDeficiencyText = ret.showDeficiencyText === 'True' ? true : false;
ret.showCorrectiveText = ret.showCorrectiveText === 'True' ? true : false;
ret.correctiveActionSection = ret.correctiveActionSection === 'True' ? true : false;
//breakdown for marshal at later time.
ret.inspection = {
untested: ret.inspectionUntestedLabel,
passed: ret.inspectionPassedLabel,
failed: ret.inspectionFailedLabel,
};
return ret;
}
//stub code. real code isn't written yet.
function setInspectionException($scope)
{
return function (sval, bval) {
console.log(sval,bval);
};
};
})();
没有自定义指令。没有花哨的代码。我竭尽全力让这件事尽可能简单。
更新：我已尝试将所有 ngIf 指令更改为 ngShow。页面变慢了，但问题没有解决。
【问题讨论】：
-
想在小提琴中重现？或者至少向我们展示代码。
-
@RahilWazir 这就是问题所在。真的没有太多代码。在基本控制器上，我将任务结构绑定到范围，标签看起来像我的示例。由于这只影响Chrome，而且我有deadline，发布后，如果没有解决，我会做一个plunker demo。
-
@RahilWazir，我刚刚意识到控制器没有太多代码，所以我刚刚发布了它。
$scope.sourceData会被填充，因为在通过控制器对其进行按摩后，带有“调试”水印的区域会被它填充。我不得不清理一些代码，所以这里可能会出现拼写错误。 -
@RahilWazir，我在 Chrome 中注意到一件事，那就是我必须经过几层 $parent 才能找到包含任务根的实际对象。即Task存在于$scope中，并且在这个controller中添加了detail。
标签： javascript angularjs internet-explorer google-chrome firefox