AngularJS和filemanager打破了表单字段的作用域
AngularJS with filemanager breaks scope on formfield?
我正试图使用文件管理器在表单字段中插入图像链接,但数据没有提交到控制器的作用域。
当我设置一个默认值时,这个值是不变的。
这是形式:
<!--show while loading-->
<div ng-if="showItem && !itemLoaded">
<i class="fa fa-spinner fa-spin fa-3x"></i>
</div>
<!--show when error loading-->
<div ng-if="showItem && listError">
{{ 'ERROR_LOADING' | translate }}
</div>
<!--show when loaded-->
<div ng-if="showItem && itemLoaded && !listError">
<div class="menu-item-background">
<input type="hidden" name="cat_id" value="{{item.cat_id}}" ng-model="item.cat_id">
<div class="form-group">
<label for="cat_parent_id">{{'MENUPARENT' | translate }}</label>
<select name="cat_parent_id" id="cat_parent_id" ng-model="item.cat_parent_id">
<option value="">--{{ 'DOSELECT' | translate }}</option>
<option ng-repeat="option in parentOptions.options" value="{{option.cat_id}}">{{option.cat_name}}</option>
</select>
</div>
<div class="form-group">
<label for="cat_lang_id">{{'MENULANG' | translate }}</label>
<select name="cat_lang_id" id="cat_lang_id" ng-model="item.cat_lang_id">
<option value="">--{{ 'DOSELECT' | translate }}</option>
<option ng-repeat="option in langOptions.options" value="{{option.lang_id}}">{{option.lang_name}}</option>
</select>
</div>
<div class="form-group">
<label for="cat_name">{{'CATNAME' | translate }}</label>
<input type="text" id="cat_name" name="cat_name" placeholder=" {{'CATNAME' | translate }}" ng-model="item.cat_name">
</div>
<div class="form-group">
<label for="cat_image">{{'CATIMAGE' | translate }}</label>
<input type="text" id="cat_image" name="cat_image" placeholder=" {{'CATIMAGE' | translate }}" ng-model="item.cat_image" ng-click="openWindow()"> <i class="fa fa-info-circle" title="Klik in het tekstvak hiernaast om de file manager te openen. Blader naar het goede bestand en dubbelklik om deze te selecteren en in het tekstveld te plaatsen."></i>
</div>
<div class="form-group">
<label for="cat_order">{{'MENUORDER' | translate }}</label>
<input type="text" id="cat_order" name="cat_order" placeholder=" {{'MENUORDERNR' | translate }}" ng-model="item.cat_order">
</div>
<div class="form-group">
<label for="cat_active">{{'MENUACTIVE' | translate }}</label>
<input type="checkbox" id="cat_active" name="cat_active" value="1" ng-model="item.cat_active" ng-true-value="'1'" ng-false-value="'0'">
</div>
<div>
<button type="button" class="btn btn-default" ng-click="cancel()">{{'BUTTON_CANCEL' | translate }}</button>
<button type="button" class="btn btn-default" ng-click="safeCategory(item.cat_id, item.cat_parent_id, item.cat_lang_id, item.cat_name, item.cat_image, item.cat_order, item.cat_active)">{{'BUTTON_SAFE' | translate }}</button>
</div>
</div>
</div>
我用angular打开弹出窗口,它会触发一个常规的javascript窗口.open函数,弹出窗口运行良好,链接被放置在表单字段中,但它从未到达范围。
问题似乎在于,当以编程方式输入数据时,没有更新范围。此外,当未手动输入数据时,ng更改不会触发。我希望有一个变通办法。
有什么想法吗
好的,我找到了解决方案。
因为我从指令中删除了作用域,所以我不得不在指令标记上调用作用域。在这种情况下,应用程序类别详细信息。
我使用了有问题的文件管理器的回调功能,该函数如下所示。
function responsive_filemanager_callback(field_id) {
// Function to determine the scope of the directive tag.
// I used this because I set the scope of the directive back to the controller
// therefor the controller is never explicitly mentioned in the HTML as
// ng-controller='controllername', so getElementByID is useless in this case
// With this function I can find every scope on every ""visible"" directive tag.
// In this case "app-category-detail"
sc = function (el) {
return angular.element(el).scope();
};
// First check which directive is there
if($('app-category-detail')) {
// call for the scope
fnd = sc('app-category-detail');
// set the value of the variable in the scope.
fnd.item.cat_image = $("#cat_image").val();
}
}
我希望这对未来的某个人有所帮助,因为我花了两天的时间才弄清楚这一点。
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 添加和删除隐藏字段数组中的值,而不提交表单
- 单击鼠标,用MySQL数据填充html表单输入字段
- 带有条件字段的PHP表单
- 验证PDF表单中的字段
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 在表单中的输入字段上提交事件
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 表单输入字段随着溢出的文本而增长
- 如何将onChange方法添加到ExtJS 4表单中的所有字段(textField)中
- 尝试使用名称访问表中字段的日期选取器时出现问题
- Javascript 表单 - 字段不是必需的
- 单击按钮时更改数据库表的字段值
- 数据表将字段值关联到按钮,而 ajax 填充表
- 返回数据表输入字段
- 更改附加表行字段jQuery的名称
- Angularjs表单/字段验证使用JavaScript函数,无需指令
- 仅在Firefox中,表脱离字段集边界
- 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$_POST数组中的值
- 什么's提交表单后,从post数组中动态附加的表行字段中获取值的问题