Wie ändere ich den `displayText` und den` displayText`, wenn ich die Eingabe fokussiere?

Jetzt muss ich den unterschiedlichen Text anzeigen, wenn ich den Eingang fokussiere und den Eingang verwische.Wie ändere ich den `displayText` und den` displayText`, wenn ich die Eingabe fokussiere?

Wenn ich Maus auf die input, möchte ich die displayText ändern und die displayText anzeigen, dann wird es die Worte "networkText" zeigen.

Dies ist mein Code unten:

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
     .centerBigView { 
      margin: auto; 
      width: 900px; 
      height: 1000px; 
      background-color: rebeccapurple; 
     } 

     .topSearchView { 
      margin: 20px auto; 
      width: 300px; 
      height: 40px; 
      background-color: yellow; 
     } 

     .topSearchView input { 
      display: block; 
      margin: auto; 
     } 

     .resultView { 
      margin: auto; 
      width: 600px; 
      background-color: darkgrey; 
     } 

     li { 
      color: white; 
     } 
    </style> 
</head> 
<script src="angular.js"></script> 
<body ng-app="searchAPP" ng-controller="controller11"> 
<div class="centerBigView"> 
    <div class="topSearchView"> 
     <input type="text" 
       blurred-focused='databaseForm.connectionName' displayText="" name="connectionName"> 
    </div> 
    <div class="resultView"> 
     <ul> 
      <li> 
       <span>{{displayText}}</span> 
      </li> 
     </ul> 
    </div> 
    </div> 
    <script> 
    var app = angular.module("searchAPP", []); 
    app.controller('controller11', ['$scope', function ($scope) { 

     $scope.displayText = "nature animal plant";; 
    }]); 
    app.directive("blurredFocused", [function() { 
     return { 
      restrict: "A", 
      priority: -1, 
      scope: { 
       blurredFocused: "=" 
      }, 
      link: function (scope, ele, attrs) { 
       ele.on("blur", function() { 
        scope.$apply(function() { 

        }); 

       }); 
       ele.on("focus", function() { 
        scope.$apply(
         attrs.displayText = "networkText"; 
        ); 
       }) 
      } 
     } 
    }]); 
</script> 
</body> 
</html>

Quelle

2016-10-08 jiexishede

wo Sie 'networkText' zeigen wollen, tun, um, wenn der Eingang fokussiert - hier ' {{displayText}}' in 'resultView'? –

Ich möchte den {{displayText}} in resultView anzeigen. – jiexishede

siehe [meine Antwort] (http://stackoverflow.com/a/39928897/2545680) dann –

Wenn Sie ein Isolat Umfang benötigen, dann gibt es zwei Möglichkeiten Die erste Option ist Rückruf dieser updateDisplayText wie zu verwenden:

app.controller('controller11', ['$scope', function ($scope) { 
    $scope.displayText = "nature animal plant"; 
    $scope.updateDisplayText = function(text) { 
     $scope.displayText = text; 
    } 
}]); 
app.directive("blurredFocused", [function() { 
    return { 
     restrict: "A", 
     priority: -1, 
     scope: { 
      updateDisplayText: "=" 
     }, 
     link: function (scope, ele, attrs) { 
      ele.on("blur", function() { 
       scope.$apply(function() { 
        scope.updateDisplayText("nature animal plant"); 
       }); 

      }); 
      ele.on("focus", function() { 
       scope.$apply(function() {     
        scope.updateDisplayText("networkText"); 
       } 
       ); 
      }) 
     } 
    } 
}]);

HTML

<div class="topSearchView"> 
    <input type="text" 
       blurred-focused='databaseForm.connectionName' update-display-text="updateDisplayText" name="connectionName"> 
</div> 
<div class="resultView"> 
    <ul> 
     <li> 
      <span>{{displayText}}</span> 
     </li> 
    </ul> 
</div>

Der zweite Ansatz wäre displayValue als ein Objekt zu machen, wie folgt aus:

app.controller('controller11', ['$scope', function ($scope) { 
    $scope.displayText = {value: "nature animal plant"}; 
}]); 
app.directive("blurredFocused", [function() { 
    return { 
     restrict: "A", 
     priority: -1, 
     scope: { 
      displayText: "=" 
     }, 
     link: function (scope, ele, attrs) { 
      ele.on("blur", function() { 
       scope.$apply(function() { 
        scope.displayText.value = "nature animal plant"; 
       }); 

      }); 
      ele.on("focus", function() { 
       scope.$apply(function() {     
        scope.displayText.value = "networkText"; 
       } 
       ); 
      }) 
     } 
    } 
}]);

HTML

<div class="topSearchView"> 
    <input type="text" 
      blurred-focused='databaseForm.connectionName' display-text="displayText" name="connectionName"> 
</div> 
<div class="resultView"> 
    <ul> 
     <li> 
      <span>{{displayText.value}}</span> 
     </li> 
    </ul> 
</div>

Quelle

2016-10-08 05:09:03

Wie ändere ich den `displayText` und den` displayText`, wenn ich die Eingabe fokussiere?

Antwort

Verwandte Themen