Question

我正在尝试使用自定义指令的隔离范围。

一个具有挑战性的问题我与很多开发人员进行了核实，到目前为止我没有得到答案。

请从链接中找到来自JS 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("")
  };

等待解决方案.. 请任何人帮助我 ..真的很感激

Answer 1

我修改了您的代码，以便您可以通过按“反向名称”按钮将值从父控制器传递到指令，然后按“我的反向”按钮使“名称反转”按下< strong>不影响父控制器。

我添加了链接功能参数，在其中，我创建了myReverseD（）函数，当您单击“我的反转”按钮时会调用该函数。

所以你的指令就是：

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/

希望有所帮助，祝你好运。

Answer 2

我有另一个解决方案。

jsfiddle上的实例。

＆＃13;

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
        });
      }
    }
  };
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

隔离范围 - 仅在指令范围内定义的值必须执行更改

2 个答案: