- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Bootstrap 开发 Angular 应用。
为了尽量减少 Bootstrap 在我的 HTML 上的占用空间,我引入了两个表单指令:
form-control.js
module.directive('formControl', function() {
return {
restrict : 'E',
templateUrl : 'form-control.tmpl.html',
scope: {
label: '@'
},
transclude : true
};
});
form-control.tmpl.html
<div class="form-group">
<label class="control-label col-sm-2">
{{ label }}
</label>
<div class="col-sm-10"
ng-transclude>
</div>
</div>
我还对该指令进行了一些“扩展”,用于各种表单输入字段。例如:
表单输入文本.js
module.directive('formInputText', function() {
return {
restrict : 'E',
templateUrl : 'form-input-text.tmpl.html',
scope: {
label: '@',
value: '=ngModel'
}
};
});
form-input-text.tmpl.html
<form-control label="{{label}}">
<input type="text"
class="form-control"
ng-model="value">
</form-control>
app.html
<form-input-text label="Name"
ng-model="person.name">
</form-input-text>
这里我遇到了一个问题。此示例中有许多作用域:
appScope = { person : { name : "John" } };
isolateScope = {
label: "Name",
value: "John" // bound two-way with appScope.person.name
};
transcludeScope = {
__proto__: isolateScope,
label: "Name", // inherited from isolateScope
value: "John" // inherited from isolateScope
};
如果我改变输入文本框中的文本,那么只有transcludeScope
被修改:
appScope = { person : { name : "John" } };
isolateScope = {
label: "Name",
value: "John" // bound two-way with appScope.person.name
};
transcludeScope = {
__proto__: isolateScope,
label: "Name", // inherited from isolateScope
value: "Alice" // overrides value from isolateScope
};
这是因为 <input>
直接绑定(bind)到 transcludeScope
的属性. transcludeScope.value
直接改了,父作用域isolateScope
不受影响。因此,输入中的任何模型更改都不会返回到 appScope
。 .
我想做的是在 appScope.person.name
之间创建双向绑定(bind)和 isolateScope
的嵌套属性,例如isolateScope.model.value
.
理想情况下,我想这样声明我的指令:
表单输入文本.js
module.directive('formInputText', function() {
return {
restrict : 'E',
templateUrl : 'form-input-text.tmpl.html',
scope: {
model: {
label: '@',
value: '=ngModel'
}
}
};
});
这将允许嵌入的部分绑定(bind)到 model.value
,这将使更改对 isolateScope 可见,而 isolateScope 又会在 isolateScope
中传播更改返回appScope
.
Angular 似乎不直接支持这种用法。
谁能指出支持此用例的 Angular 功能,或者如果不支持,请提供解决方法?
编辑:
目前,我的解决方案是内联 form-control
模板进入 form-input-text
模板。
form-input-text.tmpl.html
<div class="form-group">
<label class="control-label col-sm-2">
{{ label }}
</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
ng-model="value">
</div>
</div>
这消除了引入的子范围 ng-transclude
,但它也复制了标记,这是我希望重构到一个地方的。
最佳答案
考虑作用域实际上有点走错了路,我认为嵌入与它没有太大关系。要“正确地”执行此操作,您应该与 ngModelController
集成。这允许任何以后集成的解析器和格式化程序(可能包含验证逻辑)在适当的时间运行。这有点复杂,因为你有 2 个:应用程序中的父级和指令模板中的父级,每个都有 2 个“管道”要集成:
父 ngModelController 的 View 值然后用作内部 ngModelController 的模型值。所以整体管道看起来像
为此:
确保您在指令定义中require: 'ngModel'
,以访问父级 ngModelController
从父级 ngModelController 到内部的更改是使用父级 ngModelController
的 $render
方法完成的,使用其 $viewValue
。这可确保父级 $formatters
中的任何函数都已运行。
用户从内部指令发起的更改是通过向其 $viewChangeListeners
数组添加一个函数来完成的,该函数调用父 ngModelController 上的
。要从链接函数范围访问它,您需要一个命名的表单和输入元素。一个小麻烦是,表单仅在指令的链接功能运行后才在指令范围内注册,因此您需要观察者才能访问它。$setViewValue
以防万一,请确保 formInputText
中的模型在一个对象中。 (我不确定这在技术上是否必要)
然后您不需要在内部指令的 scope
对象中拥有模型。
综合来看,
app.directive('formInputText', function() {
return {
restrict : 'E',
templateUrl : 'form-input-text.tmpl.html',
scope: {
label: '@'
},
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
scope.model = {};
// Propagate changes from parent model to local
ngModelController.$render = function() {
scope.model.value = ngModelController.$viewValue;
};
// Propagate local user-initiated changes to parent model
scope.$watch('form', function(form) {
if (!form) return;
form.input.$viewChangeListeners.push(function() {
ngModelController.$setViewValue(form.input.$modelValue);
});
});
}
};
});
它的模板看起来像
<form-control label="{{label}}" ng-form name="form">
<input type="text"
class="form-control"
name="input"
ng-model="model.value">
</form-control>
这可以在 http://plnkr.co/edit/vLGa6c55Ll4wV46a9HRi?p=preview 上看到
关于javascript - 如何协调 Angular 的 "always use dots with ngModel"规则与隔离范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26459958/
我的公司有一个 Web 应用程序,其中包含纯 JavaScript,它以自己的方式使用 $ -“美元符号”,如下所示: function $(e) { return document.getE
doc说“这意味着对单个节点上单个分区内的行的写入仅对执行操作的客户端可见”。 如果有另一个 client2 在同一个分区和同一个节点上执行操作,那么文档中提到的“THE CLIENT”执行的写入是否
只是一个想法,但在 DIV 上使用 IFRAME 本质上会使该元素与窗口隔离,从而降低 IFRAME 中运行的脚本速度 不会影响其他框架/窗口吗? 最佳答案 是的,对于第一部分,iframe 会“某种
我有以下模型 Inventory [product_name, quantity, reserved_quantity] 有数据 [Shirt, 1, 0] [Shorts, 10, 0] 如果以下代
我面临的情况如下。因为ThreadPool是每个进程1个实例,所以我的问题是是否会在 3秒后取消方法2排队的任务? http request comes in *method 1 gets execu
我希望在 Dart 中创建一个 Isolate,我可以通过编程方式暂停和恢复。这是我使用的代码。 import 'dart:io'; import 'dart:isolate'; void main(
我想编写一个具有隔离作用域的指令,但也希望使该作用域可用于父作用域的 Controller 。我找到了这个解决方案: app.directive('popupbutton', [functi
我有一个像这样的 JSON 对象: [ {"Subject": "Physics", "Active": 48, "Date": "2020-01-22T00:00:00Z"}, {"Su
我正在使用 Elixir 自动执行用 Gherkin 编写的规范中定义的验收测试。一种方法是使用名为 Cabbage 的 ExUnit 插件。 . 现在,ExUnit 似乎提供了一个在任何单个测试之前
我被要求为多个用户配置一个带有 docker 的 ubuntu 18.04 服务器。 目的: 我们有多个编写测试用例的测试人员。但是我们的笔记本电脑速度不够快,无法在 docker 环境中构建项目和运
我一直在网上寻找完整的解决方案,但到目前为止,我只能找到不合适的部分。 我正在寻找一个可以查看图像文件、循环遍历文件并隔离 Sprite 然后保存它们的程序。之后,我需要一种方法来重新访问该 Spri
我想知道如何隔离 JavaScript 函数的执行以避免浏览器崩溃。 示例:如果我想在控制台中输出一个包含大约 10k 元素的关联数组,浏览器将停止响应。我怎样才能避免这种情况? 最佳答案 解决方案是
我必须向我的数据库添加大量信息。添加此信息大约需要 5-7 分钟。我需要添加交易。 我试过这个: try { db.Connection.Open(); db.Transaction
我有 6 个 iframe,它们来自同一个域,但具有不同的 url 和子目录。他们都使用 html header “set-cookie”设置了一个名称相同但值不同的 cookie。我需要将它们的 c
我正在编写一个代码,它基本上读取一个文本文件(表格格式)并检查该文件是否包含预期的数据类型。为此我写了下面的课。 示例文件应该是这样的。 name age abc 20 xyz
我有一个表,线程。我有一个表,thread_participants。我正在尝试隔离与特定 thread_id 和特定 thread_participants.user_id 标识的行。 例如,如果
我有一个非常实际的问题。我的数据库中有大约 400 篇文章,在这些文章中我有其他文章的链接。在转换过程中,链接被破坏。我们在 CMS 中手动插入新的菜单链接项。我想制作一个脚本来查找(文章)id 并将
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 10 年前。 Improve thi
我在想是否可以在 postgres 数据库(高于 8.3 的版本)上创建一个只能访问特定指定模式的用户。问题是,在我的数据库中我有一些模式。如果我撤销某个用户对除一个模式之外的所有模式的所有特权,他仍
我有两组点,一组来自分析,另一组用于分析数据的后处理结果。 黑色的分析数据是散乱的。 用于结果的点是红色的。 这是同一地 block 上的两组: 我遇到的问题是:我将插值到红点上,但如您所见,有些红点
我是一名优秀的程序员,十分优秀!