AngularJS-从子指令访问父指令属性
这不是一件很难的事，但我无法弄清楚如何做到最好。
我有一个父指令，像这样：
directive('editableFieldset', function () {
return {
restrict: 'E',
scope: {
model: '='
},
replace: true,
transclude: true,
template: '
<div class="editable-fieldset" ng-click="edit()">
<div ng-transclude></div>
...
</div>',
controller: ['$scope', function ($scope) {
$scope.edit = ->
$scope.editing = true
// ...
]
};
});
和一个子指令：
.directive('editableString', function () {
return {
restrict: 'E',
replace: true,
template: function (element, attrs) {
'<div>
<label>' + attrs.label + '</label>
<p>{{ model.' + attrs.field + ' }}</p>
...
</div>'
},
require: '^editableFieldset'
};
});
如何从子指令轻松访问父指令的model和editing属性？在我的链接函数中，我可以访问父级作用域-我应该$watch用来观察这些属性吗？
放在一起，我想拥有的是：
<editable-fieldset model="myModel">
<editable-string label="Some Property" field="property"></editable-string>
<editable-string label="Some Property" field="property"></editable-string>
</editable-fieldset>
这个想法是默认情况下显示一组字段。如果单击，它们将成为输入并可进行编辑。
问题答案：
从这篇SO帖子中汲取灵感，我在这个笨拙的人中有一个可行的解决方案。
我不得不改变很多。我还选择了一个独立的作用域，editableString因为将正确的值绑定到模板更容易。否则，您将不得不使用compile或其他方法（例如$transclude服务）。
结果如下：
JS：
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope) {
$scope.myModel = { property1: 'hello1', property2: 'hello2' }
});
myApp.directive('editableFieldset', function () {
return {
restrict: 'E',
scope: {
model: '='
},
transclude: true,
replace: true,
template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>',
link: function(scope, element) {
scope.edit = function() {
scope.editing = true;
}
},
controller: ['$scope', function($scope) {
this.getModel = function() {
return $scope.model;
}
}]
};
});
myApp.directive('editableString', function () {
return {
restrict: 'E',
replace: true,
scope: {
label: '@',
field: '@'
},
template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>',
require: '^editableFieldset',
link: function(scope, element, attrs, ctrl) {
scope.model = ctrl.getModel();
}
};
});
HTML：
<body ng-controller="Ctrl">
<h1>Hello Plunker!</h1>
<editable-fieldset model="myModel">
<editable-string label="Some Property1:" field="property1"></editable-string>
<editable-string label="Some Property2:" field="property2"></editable-string>
</editable-fieldset>
</body>
-
问题内容： 我的AngularJS模板包含一些自定义HTML语法，例如： 我创建了一个指令来处理它： 一切正常，但表达式始终返回，即使在执行时从Google Chrome浏览器的JavaScript控制台可见该属性，该表达式始终返回。 有什么建议吗？ 更新：Artem提供了一种解决方案。它包括这样做： AngularJS + stackoverflow =幸福 问题答案： 请参阅指令文档中的属性一
-
我的AngularJS模板包含一些自定义HTML语法，例如： AngularJS+stackoverflow=bliss
-
问题内容： 我有两个Angular指令，一个嵌套在另一个内，如下所示。 的HTML responseGroup.template.html responseOption.template.html 的JavaScript 我希望子指令可以访问父指令中的“ response-group-id”字段。我该怎么做呢？我能够通过让子指令要求父指令，然后在子指令的“ link”方法中获取它来获取值，但是那时
-
问题内容： 我不确定这是这样做的方法，但是我的目标是： 我有一个家长指令 在父指令的代码块中，我有一个子指令，它将从用户那里获得一些输入 子指令将在父指令的范围内设置一个值 我可以从那里拿走 当然，问题在于父和子指令是同级的。所以我不知道该怎么做。注意-我不想在 小提琴：http : //jsfiddle.net/rrosen326/CZWS4/ 的HTML： Java脚本 问题答案： 如果要进行
-
例如，Angular 2内置的属性指令ngClass和ngStyle，可以在任何组件或元素上工作。
-
问题内容： 我正在尝试构建一个指令，该 指令 负责在其声明的元素上 添加更多指令 。例如，我要建立一个指令，需要增加的照顾，和。 如果我尝试添加这些属性然后使用，则显然会生成一个无限循环，因此我正在检查是否已添加所需的属性： 当然，如果我没有该元素，则将设置属性，但不会引导该指令。 这种方法正确还是我做错了？有没有更好的方法来实现相同的行为？ UDPATE ：鉴于这是实现此目标的唯一方法，是否有一