隔离范围 - 单独在指令范围内定义的值必须执行更改
Isolate scope - Value defined inside directive scope alone must perform change
我正在尝试隔离自定义指令的范围。
一个具有挑战性的问题我咨询了很多开发人员,到目前为止我没有得到答案。
请从 Link 中找到来自 JS Fiddle 的代码,并帮助我更正我应该做哪些更改才能使它正常工作。
指令模板中有一个名为My Reverse的按钮"On button click, I want to change text value which is there inside the directive template without affecting the parent value**"
期待在提供的 Fiddle 代码中进行更正。Requesting correction to this code sample in JS FIDDLE
更具体的说明:
当我单击父按钮时,我想影响指令文本框值,但是当我单击指令按钮时,我想要仅影响指令文本框值不影响父文本框值。
app.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
name: "@",
color: "=",
reverse: "&"
},
template: [
"<div class='line'>",
"Name : <strong>{{name}}</strong>; Change name:<input type='text' ng-model='name' /><br/>",
"<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
"</div><div class='line'>",
"Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>; Change color:<input type='text' ng-model='color' /><br/></div>",
"<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
].join("")
};
等待解决方案..请哪位大侠帮助我..将不胜感激
我修改了你的代码,这样你就可以通过按下“Reverse Name”按钮将值从父控制器传递到指令,并通过按下 'Name reverse' 'My Reverse'按钮,不影响父控制器。
我添加了 Link 函数参数并在其中创建了 myReverseD() 函数,当您单击 'My Reverse' 按钮时会调用该函数。
所以在你的指令中你有:
app.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
name: "@",
color: "@",
reverse: "&"
},
template: [
"<div class='line'>",
"Name : <strong>{{name}}</strong>; Change name:<input type='text' ng-model='name' id='nametxt'/><br/>",
"<br/>On button click 'My Reverse', I want to reverse text value which is there inside directive template of isolate scope without affecting the above defined parent Name in Parent scope : <input type='button' ng-click='myReverseD($event)' value='My Reverse'/>",
"</div><div class='line'>",
"Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>; Change color:<input type='text' ng-model='color' /><br/></div>",
"<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
].join(""),
link: function (scope, element, attrs) {
console.log(scope.name,scope.color);
scope.myReverseD = function($ev){
var nametxt = document.getElementById('nametxt');
console.log($ev);
console.log('reverse',nametxt,nametxt.value);
nametxt.value = nametxt.value.split("").reverse().join("");
}
}
};
JSFIDDLE:http://jsfiddle.net/own7kbru/7/
希望有所帮助,祝你好运。
我有另一个解决方案。
上的实例
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.name = "Harry";
$scope.color = "#333333";
$scope.getReverseName = function(name) {
console.log('getReverseName', name);
return name ? name.split("").reverse().join("") : name;
};
$scope.reverseName = function() {
$scope.name = $scope.getReverseName($scope.name);
};
$scope.randomColor = function() {
$scope.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
};
});
app.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
name: "@",
color: "@",
reverse: "&"
},
template: [
"<div class='line'>",
"Name : <strong>{{name}}</strong>; Change name:<input type='text' ng-model='name' /><br/>",
"<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
"</div><div class='line'>",
"Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>; Change color:<input type='text' ng-model='color' /><br/></div>",
"<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
].join(""),
link: function(scope) {
scope.myReverse = function() {
console.log(scope.name);
scope.name = scope.reverse({
name: scope.name
});
}
}
};
});
.parent {
border: 20px solid #676767;
padding: 20px;
}
.parent,
.directive {
position: relative;
}
.parent:after,
.directive:after {
display: inline;
color: #fff;
font-size: normal;
position: absolute;
top: -20px;
left: -20px;
z-index: 100;
padding: 1px 5px;
background-color: rgba(0, 0, 0, 0.5);
}
.parent:after {
content: "MainCtrl or Parent Scope";
}
.directive {
padding: 20px;
border: 20px solid #cbccdd;
margin-top: 20px;
}
.directive:after {
content: "Directive Scope"
}
.line {
border-bottom: 1px dotted #ccc;
padding: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div class="parent" ng-controller="MainCtrl">
<div class="line">
Name inside parent scope is: <strong>{{name}}</strong>
<input type="button" ng-click="reverseName()" value="Reverse name" />
</div>
<div class="line">
Color inside parent scope is: <strong style="color:{{color}}">{{color|uppercase}}</strong>
<input type="button" ng-click="randomColor()" value="Randomize color" />
</div>
<div class="directive" my-directive name="{{name}}" color="{{color}}" reverse="getReverseName(name)"></div>
</div>
</div>
我正在尝试隔离自定义指令的范围。
一个具有挑战性的问题我咨询了很多开发人员,到目前为止我没有得到答案。
请从 Link 中找到来自 JS Fiddle 的代码,并帮助我更正我应该做哪些更改才能使它正常工作。
指令模板中有一个名为My Reverse的按钮"On button click, I want to change text value which is there inside the directive template without affecting the parent value**"
期待在提供的 Fiddle 代码中进行更正。Requesting correction to this code sample in JS FIDDLE
更具体的说明:
当我单击父按钮时,我想影响指令文本框值,但是当我单击指令按钮时,我想要仅影响指令文本框值不影响父文本框值。
app.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
name: "@",
color: "=",
reverse: "&"
},
template: [
"<div class='line'>",
"Name : <strong>{{name}}</strong>; Change name:<input type='text' ng-model='name' /><br/>",
"<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
"</div><div class='line'>",
"Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>; Change color:<input type='text' ng-model='color' /><br/></div>",
"<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
].join("")
};
等待解决方案..请哪位大侠帮助我..将不胜感激
我修改了你的代码,这样你就可以通过按下“Reverse Name”按钮将值从父控制器传递到指令,并通过按下 'Name reverse' 'My Reverse'按钮,不影响父控制器。
我添加了 Link 函数参数并在其中创建了 myReverseD() 函数,当您单击 'My Reverse' 按钮时会调用该函数。
所以在你的指令中你有:
app.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
name: "@",
color: "@",
reverse: "&"
},
template: [
"<div class='line'>",
"Name : <strong>{{name}}</strong>; Change name:<input type='text' ng-model='name' id='nametxt'/><br/>",
"<br/>On button click 'My Reverse', I want to reverse text value which is there inside directive template of isolate scope without affecting the above defined parent Name in Parent scope : <input type='button' ng-click='myReverseD($event)' value='My Reverse'/>",
"</div><div class='line'>",
"Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>; Change color:<input type='text' ng-model='color' /><br/></div>",
"<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
].join(""),
link: function (scope, element, attrs) {
console.log(scope.name,scope.color);
scope.myReverseD = function($ev){
var nametxt = document.getElementById('nametxt');
console.log($ev);
console.log('reverse',nametxt,nametxt.value);
nametxt.value = nametxt.value.split("").reverse().join("");
}
}
};
JSFIDDLE:http://jsfiddle.net/own7kbru/7/
希望有所帮助,祝你好运。
我有另一个解决方案。
上的实例var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.name = "Harry";
$scope.color = "#333333";
$scope.getReverseName = function(name) {
console.log('getReverseName', name);
return name ? name.split("").reverse().join("") : name;
};
$scope.reverseName = function() {
$scope.name = $scope.getReverseName($scope.name);
};
$scope.randomColor = function() {
$scope.color = '#' + Math.floor(Math.random() * 16777215).toString(16);
};
});
app.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
name: "@",
color: "@",
reverse: "&"
},
template: [
"<div class='line'>",
"Name : <strong>{{name}}</strong>; Change name:<input type='text' ng-model='name' /><br/>",
"<br/>When I click 'My Reverse' Button, name given inside 'Directive scope' alone must perform reverse operation & not Name inside Parent scope : <input type='button' ng-click='myReverse()' value='My Reverse'/>",
"</div><div class='line'>",
"Color : <strong style='color:{{color}}'>{{color|uppercase}}</strong>; Change color:<input type='text' ng-model='color' /><br/></div>",
"<br/><input type='button' ng-click='reverse()' value='Reverse Name'/>"
].join(""),
link: function(scope) {
scope.myReverse = function() {
console.log(scope.name);
scope.name = scope.reverse({
name: scope.name
});
}
}
};
});
.parent {
border: 20px solid #676767;
padding: 20px;
}
.parent,
.directive {
position: relative;
}
.parent:after,
.directive:after {
display: inline;
color: #fff;
font-size: normal;
position: absolute;
top: -20px;
left: -20px;
z-index: 100;
padding: 1px 5px;
background-color: rgba(0, 0, 0, 0.5);
}
.parent:after {
content: "MainCtrl or Parent Scope";
}
.directive {
padding: 20px;
border: 20px solid #cbccdd;
margin-top: 20px;
}
.directive:after {
content: "Directive Scope"
}
.line {
border-bottom: 1px dotted #ccc;
padding: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div class="parent" ng-controller="MainCtrl">
<div class="line">
Name inside parent scope is: <strong>{{name}}</strong>
<input type="button" ng-click="reverseName()" value="Reverse name" />
</div>
<div class="line">
Color inside parent scope is: <strong style="color:{{color}}">{{color|uppercase}}</strong>
<input type="button" ng-click="randomColor()" value="Randomize color" />
</div>
<div class="directive" my-directive name="{{name}}" color="{{color}}" reverse="getReverseName(name)"></div>
</div>
</div>