是否可以从具有隔离范围属性的元素的内部HTML访问父范围？
是的，可以通过使用JavaScript中的特定属性和方法来从具有隔离范围属性的元素的内部HTML访问父范围。
在HTML中，可以使用<template>元素来创建具有隔离范围属性的模板。隔离范围属性可以是scoped或shadow。
对于具有scoped属性的模板，可以使用JavaScript的querySelector方法来选择父范围内的元素。例如，如果父范围的元素具有id为"parent"，可以使用以下代码访问它：
const parentElement = document.querySelector('#parent');对于具有shadow属性的模板，可以使用shadowRoot属性来访问父范围内的元素。例如，如果父范围的元素具有id为"parent"，可以使用以下代码访问它：
const parentElement = document.querySelector('#parent').shadowRoot;通过访问父范围内的元素，您可以执行各种操作，例如修改父范围内的元素样式、添加/删除子元素等。
这是一个应用场景的例子：假设您正在开发一个自定义的Web组件，该组件具有隔离范围属性。您可以从组件内部访问父范围，以便根据组件的状态或用户交互来更新父范围内的内容。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
在我的例子中，angular指令的作用域对象似乎“削弱”了img src。如果我取下scope: { myDirectiveText: "=" }，图像就会显示出来。有了它，图像就不会显示。
以下是指令
app.directive('myDirective', function(){
return {
restrict: 'A',
scope: { myDirectiveText: "=" }, // having this will cause image to disappear.
浏览 1提问于2013-10-15得票数 0
2回答
我在一页上有两次指令，但它一直在覆盖自己。这意味着，dialogId会被模板中下一个示例对话框的实例覆盖，而不是保留自己的dialogIds。
angular.module('directives')
.directive('exampleDialog', ["$rootScope", "$timeout", "ngDialog", "$compile", '$templateRequest', function ($rootScope, $timeout, ngDialog
浏览 0提问于2017-06-11得票数 0
2回答
我希望像这样在指令中设置默认值，但它将为null
(function(angular) {
'use strict';
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
}])
.directive('myDialog', function() {
return {
restrict: 'E',
t
浏览 2提问于2015-09-01得票数 1
回答已采纳
1回答
具有独立作用域的指令中的ng-repeat没有拾取通过'='绑定传递的属性。
HTML:
<body ng-controller="myCtrl">
<div my-directive list="users">
<ul>
<li ng-repeat="item in list">
{{item.name}}
</li>
</ul>
浏览 2提问于2014-03-23得票数 2
2回答
从指令访问控制器
、、
我已经创建了一个自定义指令，用于在当前视图中显示指令模板：
<div class="upper-outfits-layer" ng-show="outfitExpanded">
<expanded-outfit outfit="outfits[currentOutfit]"></expanded-outfit>
</div>
这将显示一个html模板。这个指令所在的视图有自己的控制器。我需要从这个指令访问视图范围变量，反之亦然。
是否可以从自定义指令访问sperate控制器？
浏览 1提问于2016-05-25得票数 0
2回答
我在玩棱角游戏，试着学习更多关于范围的知识。
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope){
$scope.color = 'green';
$scope.sayHello = function(){
console.log("HELLO FROM PARENT SCOPE");
}
});
app.directive('helloWorld', fun
浏览 0提问于2014-04-28得票数 2
回答已采纳
1回答
我有两个简单的指令..。
父指令
.directive('modal', [function () {
return {
replace: true,
scope: {
/* attributes */
},
templateUrl: 'modal.tpl.html',
transclude: true,
link: function (scope) {
/* code */
}
};
子指令
.directive('keypad', function () {
'use strict'
浏览 0提问于2013-12-02得票数 0
1回答
问题是，我必须管理从服务中检索到的口香糖球列表。当我硬编码HTML中的元素时，我创建的指令似乎有效，但是当我尝试使用ng-重复动态分配口香糖球时，它似乎是有效的。
HTML
<div ng-controller="GumballsCtrl">
<h1>Working</h1>
<ul>
<li ng-repeat="gumball in Gumballs">
<div class="gumballColor{{gumball.color}
浏览 1提问于2013-04-05得票数 7
3回答
我有一个页面在那个特定的'‘中有一个iframe，我正在用下面的代码通过ajax调用来动态地编写HTML代码。
<script>
$(document).ready(function(){
$.post(URL,
function (data) { //here it retruns the HTML code
$("body").html('<iframe style="width:100%;height:384px;"></iframe>');
浏览 1提问于2017-07-12得票数 7
我有一个静态/可变的json请求模板，当我通过一个$http POST工厂从一个控制器发送一个$http post请求时，我正在使用它。问题是，devtools范围内的模型数据不会与模板的其余部分一起传递。示例如下。任何惊人的见解都会是..。真是太神奇了。
var a = 'a';
var b = $scope.b;
var c = $scope.c;
$rootScope.requestData =
[
{
"key": a, // Binds on submission = I'm happy
浏览 0提问于2013-07-19得票数 0
我以为等号表示双向绑定？与在中一样，我会在指令中引入一个camelCased属性值。
那么这意味着什么呢？我在一本书里看一些更高级的代码
.directive('contentHandler', function () {
return {
scope: {
feed: '=contentHandler',
onChange: '&'
},
我在这里又看到了：
return {
scope: {
value: '=debug'
},
下面是与第一个相关的html：
<div c
浏览 0提问于2016-08-11得票数 0
当范围被更新时，指令的属性不会改变，它们仍然保留初始值。我在这里错过了什么？
<ul class="nav nav-pills nav-stacked" navlist>
<navelem href="#!/notworking/{{foo}}"></navelem>
<navelem href="#!/working">works great</navelem>
</ul>
<p>works: {{foo}}</p>
Javasc
浏览 6提问于2012-09-19得票数 5
回答已采纳
我需要这样做才能使用HTML5中的HTML5标记，我希望我站点上的每个<dialog>都可以使用controller和controllerAs语法访问自己的唯一作用域。
这是我认为有用的东西。
Javascript
\\Dialog Controller
function dialog () {
return {
scope: {},
controller: function () {
this.test = 'Dialog Test';
},
controllerA
浏览 2提问于2015-08-17得票数 0
我写了这段代码。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hobby='AngularJS';
});
app.directive('outputText',function(){
return {
transclude: true,
scope: {},
template: &#
浏览 2提问于2014-09-30得票数 0
回答已采纳
1回答
目前我正在学习AngularJS，并且正在阅读将变量从指令的父作用域绑定到指令的孤立作用域的方法。我对范围层次结构有一些理解问题。
有一个简单的、工作的颜色选择器指令示例：
index.html
<!DOCTYPE html>
<html ng-app="colorPickerApp">
<head>
<meta charset="utf-8">
...
</head>
<body>
<h1>AngularJS Colorpicker</h1>
浏览 0提问于2016-06-23得票数 0
我讨厌问愚蠢的问题，但不幸的是，AngularJS文档作者似乎忘了澄清一切。
创建指令时，可以通过以下代码将指令中的变量链接到HTML中的变量：
angular.module('app', []).directive('someModule', ['$window', function($window) {
return {
restrict: 'E',
transclude: true,
template: '...',
scope: {
x: &
浏览 7提问于2015-08-20得票数 1
回答已采纳
2回答
我正在构建单击以编辑指令，但对于如何访问孤立指令中的父作用域有问题。
示例：
scope: {},
如果我“取消隔离”范围(移除作用域：{})，但需要隔离作用域，它就能工作。
更新：
加法
controller: 'FormCtrl',
去执行指令。请参阅
浏览 5提问于2013-07-24得票数 9
回答已采纳
2回答
角方向作用域问题
、、
我现在有一些关于棱角的经验，但我仍然不知道那一个。我有一个directive2通过另一个directive1被屏蔽了。Directive1与控制器位于同一元素上，它们共享相同的作用域。我希望directive2继承控制器中的作用域，但它们不是父/子，而是兄弟姐妹。我在这里错过了什么？
以下是代码：
angular.module('myModule', [])
.controller('Controller', ['$scope', function($scope) {
console.log('from contr
浏览 2提问于2013-09-27得票数 0
回答已采纳
3回答
我需要有权访问由指令创建的模型，同时我需要在指令中获得attrs。
JS：
module.directive('createControl', function($compile, $timeout){
return {
scope: {
name: '=Name' // Dynamically created ng-model in the directive element
},
link: function(scope, element, attrs){
attrs.$obse
浏览 0提问于2013-05-07得票数 3
回答已采纳
本质上，我希望能够访问我创建的指令的父作用域，但也希望能够访问我放置在元素上的属性。
例如，相关的js
app.directive('testDirective', function(){
return {
restrict:"E",
templateUrl:"directive.html",
scope:{
testAttribute: '='
}
};
});
app.controller('mainCtrl
浏览 1提问于2014-10-05得票数 0
回答已采纳
在angular指令中，我知道我可以指定独立作用域，但我需要在{}中添加'=‘或'@’或'&‘来定义变量，而在link中不需要这样做，例如：
scope: {
foo:'=foo',
bar:'@bar'
}
这是可行的
link: function($scope, $element){
$scope.foo = 'foo';
$scope.bar = 'bar';
}
这也行得通( link函数在指令中)
scope: {
foo:'foo',
浏览 3提问于2014-06-25得票数 0
从$digest循环的角度来看，指令和
scope:{foo:'='}
和一个带有
scope:{},
controller:function($scope, $attrs}{
$scope.$watch($attrs.foo, function(foodata){$scope.foo=foodata});
}
虽然在大多数情况下，这两种方法在具有template='foo={{foo}}的指令上具有相同的结果，并且当像{x:1,y:2}这样的属性值(在不同的计算中从不为=== )时两者都收敛，但前者甚至在{x:1,y:number}上收敛(其中number在
浏览 1提问于2014-08-21得票数 2
我试图通过向指令传递一个方法，将一个操作按钮添加到我的DataTable中，这取决于状态是否为true。
CONTROLLER.JS
_ctr.route = 'home.stocks';
_ctr.object = [
{
id: 1,
name: 'XXXX',
status: true
}, {
id: 2,
name: 'XXXX',
status: false
}
];
_ctr.headers = {
n
浏览 0提问于2020-03-15得票数 0
2回答
我是个角的初学者。我学习了角路由教程，我对下面的代码表示怀疑，在这些代码中，一个控制器的$scope似乎被另一个控制器访问。据我所知，我们无法访问一个控制器的$scope的数据，而另一个控制器则无法访问。有人能解释一下这种情况吗？密码在这里很好。
<html lang="en" ng-app="myApp">
<body>
<div ng-controller="directoryController">
<div ng-view>
</div>
</div&g
浏览 9提问于2016-02-09得票数 2
回答已采纳
这是我的html
<example-directive id="my_id" ng-blur="test()"></example-directive>
这是我的指令
app.directive('exampleDirective', function() {
return {
restrict: 'AE',
scope: {
label: "@",
},
template: '<span class="some_inp
浏览 1提问于2015-10-21得票数 0
我的目标是访问父$scope变量.
这个对我有很大的帮助，但是我不知道如何在实际情况下做到这一点。当我在子html中声明控制器时，它会抛出一个错误：
areq?p0=ParentController&p1=not a function, got undefined
我的项目看起来像这个
这个错误是因为嵌套的App声明而发生的吗？
浏览 1提问于2014-04-29得票数 0
我很难理解模型的范围及其对范围有限的指令的约束。
我知道在指令中限制作用域意味着控制器。$ scope和directive.scope不再是一回事了。但是，我对模型在指令模板或html中的放置如何影响数据绑定感到困惑。我觉得我错过了一些非常基本的东西，为了继续前进，我需要理解这一点。
接受以下代码(在这里篡改：)
JavaScript
var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', fun
浏览 5提问于2013-05-20得票数 55
回答已采纳
2回答
下面是我的指令代码，它工作得很好：
.directive('myGrid',function(){
return {
restrict:'E',
scope:{
info:'=info'
},
templateUrl : '/directiveGrid.html'
}
})
这是一个
但如果我改变范围如下：
.directive('myGrid',function(){
return {
restrict:'E',
scope:{
浏览 2提问于2016-03-14得票数 1
回答已采纳
我在AngularJS是全新的，我正在学习一门课程。我对一个演示如何使用隔离作用域概念的示例有一些疑问。
因此，提供的示例是包含此app.js文件的单个页面应用程序，该文件包含所有应用程序逻辑：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
浏览 7提问于2015-11-15得票数 1
回答已采纳
3回答
html：
<!doctype html>
<html>
<head>
</head>
<body>
<div ng-app="project">
<div ng-controller="mainCtrl">
{{ property1 }}
<br />
{{ property2 }}
<div class="ts" d-child property1="{{ property1 }}cloud
浏览 3提问于2014-01-09得票数 4
我想对一个指令进行单元测试，如下所示：
'use strict';
angular.module('app')
.directive('phone', function () {
return {
require: 'ngModel',
scope: {
user:'=',
},
link: function(scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(func
浏览 3提问于2014-07-06得票数 1
回答已采纳
我正在构建一个嵌入了webview的电子应用程序。就像这样。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<webview
id="webview"
src="https://www.google.com/search?q=search&tbm
浏览 0提问于2018-06-10得票数 2
1回答
我正在学习如何在AngularJS中构建自定义指令。目前我正在使用AngularJS 1.5.8。
我正在尝试创建一个带有隔离作用域的指令示例，其中控制器作用域不可见，因此我可以通过将它们添加到“作用域：{}”中来有选择地公开它们。在本例中，我希望得到的是'Name: Street:‘，因为ctrl.customer应该不能用于指令。然后，我将在“作用域：{}”中添加"customer：'='“，并得到"Name:David Street:123 anywhere street”。不幸的是，我从这个指令中得到了“名字:大卫街:123号”。
我尝试过的事情
浏览 7提问于2016-09-19得票数 0
回答已采纳
1回答
我想创建一个range指令来重复包含的html x次。如下所示：
...
.directive('raichuRange', function () {
return{
scope:{
range: '=raichuRange'
},
transclude: 'element',
link : function(scope, element, attrs, ctrl, transcludeFn){
var parent = el
浏览 2提问于2016-01-23得票数 1
回答已采纳
我找不到关于Angular.js的信息，而且我在工作时注意到这两个值的工作方式不同。有什么关系呢？
.directive('foo', function() {
return {
scope: true
};
});
.directive('foo', function() {
return {
scope: {}
};
});
浏览 4提问于2014-07-02得票数 41
回答已采纳
我尝试将一个值从parent scope传递给我的directive。它的isolated scope。如果我将值作为参数传递给我的指令，它可以正常工作。但是id不适用于父作用域。
以下是我如何使用它：
<div ng-init="event='hello'"> <!-- this is parent scope -->
<input31></input31>
</div>
这是指令本身。
directives.directive("input31", [function(
浏览 7提问于2013-12-02得票数 1
我正在开发一个web应用程序，它使用服务器呈现的HTML顶部的角。
我试图使用呈现的HTML中的一部分作为可重用组件(指令)，因此我在返回的HTML中的适当标记上附加了一个属性指令。这个指令需要有一个独立的作用域，并且它还将在这个孤立的指令中进一步包含应该是子作用域的子指令。
不幸的是，scope没有用适当的范围层次结构从返回的HTML中创建指令。隔离作用域中的子指令是孤立作用域(而不是子域)的同级指令。现在，如果我将这些指令更改为使用客户端模板，它将正确工作。因此，看起来角似乎不喜欢从服务器生成的HTML中构造这种形式的指令。
为了更好地说明我的问题，我创建了几个柱塞--一个正确工作(客户端
浏览 0提问于2015-03-10得票数 3
回答已采纳
2回答
我可能对范围有点困惑(我已经阅读了很多关于它的教程，但此时我不知道如何制作这个东西)，无论如何，这就是我想要做的：
我有一张有各种牢房的桌子
<table my-table>
<tr>
<td my-table-cell>
<span ng-if="!myTableCellStatus.editing">Bla 1</span>
<input ng-if="myTableCellStatus.editing" type="text" name=&
浏览 0提问于2014-06-28得票数 0
回答已采纳
我在我的应用程序中使用aurelia撰写，如下所示：
<compose view-model="childViewModel" model="{myActivationParameters: ...}"></compose>
如何访问childViewModel html代码中的父视图模型？
最后，我希望能够在childViewModel.html中做到这一点。
<span> ${ ParentViewModel.myProperty } and ${ RootViewModel.myOtherProperty } </
浏览 4提问于2017-11-01得票数 0
回答已采纳
很好，
下面的代码似乎适用于较早版本的Angular，但在1.2版本中却不起作用。我不知道这是为什么。在角1.2中发生的情况是，$watch指令没有被击中。它不执行。它确实以角1.0.1执行。
知道为什么吗？
HTML
<fieldset validatedmarker>
<legend>User</legend>
<input type="text" name="name" class="form-control" ng-model="name" required>
浏览 3提问于2014-05-20得票数 0
回答已采纳
3回答
我正在尝试构建2个自定义指令，我的瓷砖和我的瓷砖-项目。
“my”是接受数据数组参数的主指令。
“我的-瓷砖-物品”代表“我的瓷砖”内的单个瓷砖。
但是我的瓷砖项目控制器的btnOkClick()方法不起作用。
代码：
HTML：
<div my-tile tiles="mainCtrl.tiles"></div>
我的瓷砖模板：
<script type="text/ng-template" id="myTile.html">
<div my-tile-item ng-repeat="
浏览 5提问于2017-08-21得票数 1
回答已采纳
我有一个具有某种形式的指令。通常这是我需要的全部，但有时我需要添加更多的输入域。所以我试着使用转置，但它不起作用。
我创建了一个柱塞来说明这一点：
Directive是一个简单的表单，包含输入字段、转换和一个帮助测试它的按钮(不省略重要部分)：
scope: {
},
transclude: 'element',
template:
'<form name="myForm">' +
'<input type="text" ng-model="data.inDirective"&g
浏览 10提问于2013-10-11得票数 6
2回答
我试图使用带有角指令的隔离范围。这是HTML。您可以假设在objectivesJson属性中有一个有效的数组：
<div lesson-plan objectives="objectivesJson">
<ul>
<li ng-repeat="objective in objectivesCollection" >
{{ objective.description }}
</li>
</ul>
</div>
起初，我尝试通过原型范围&监视来
浏览 6提问于2014-01-07得票数 1
回答已采纳
我指的是AngularJS的一份研究材料，并试图实现“范围隔离的指令”，但这是行不通的。请找到下面给出的代码，我已经做过了。
HTML：
<body ng-app="myApp">
<div ng-init="myProperty = 'wow, this is cool'">
Surrounding scope: {{ myProperty }}
<div my-inherit-scope-directive>
Inside an directive with inher
浏览 2提问于2017-03-27得票数 4
回答已采纳
我正在尝试将ng-style属性应用于自定义指令标记，有点像这样：
<my-directive ng-style="myStyle"></my-directive>
在控制器内部，我有：
$scope.myStyle = {
"background": "red"
}
不过，这似乎不起作用。当我检查超文本标记语言时，'MyStyle‘没有被呈现。当我在常规div上应用相同的ng样式标记时，它可以正确地呈现。
为什么ng样式在自定义指令标记上不起作用？
浏览 1提问于2013-03-15得票数 19
回答已采纳
2回答
我被一个很简单的角度问题所困扰(因为我认为它很简单)。有时候棱角分明会让我觉得自己很傻，因为我不可能做什么可怕的错事。
拿着这张
HTML：
<body ng-app="app">
<div ng-controller="ASDF">
<div fb-login="doh" ng-click="exec()">CLICKY (should execute parent scope function but doesnt)</div>
</div>
<
浏览 1提问于2014-04-29得票数 1
回答已采纳
2回答
我正在尝试创建一个带有验证的输入指令元素。我想在这个指令中管理错误状态。
有3个文件
Index.html:使用此指令
textValid.js:包含指令代码
textValid.html:包含指令模板
我创建了这个指令
textValid.js
App.directive("textValid", function() {
return {
restrict: "E",
templateUrl: "tpl/textValid.html",
require: "?
浏览 0提问于2016-10-20得票数 0
回答已采纳
我在angular.js ..I中做了一个弹出屏幕，用google .But做这个，我有问题。
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind="" inner-html="modal_html_template" class="hidden">
</div>
</div>
app.directive('innerHtmlBind', function() {
aler
浏览 3提问于2014-07-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
