`displayText`を変更し、入力をフォーカスするときに` displayText`を表示する方法は？

入力をフォーカスして入力をぼかすと、別のテキストを表示する必要があります。`displayText`を変更し、入力をフォーカスするときに` displayText`を表示する方法は？

私がinputにマウスを下ろして、displayTextを変更してdisplayTextと表示したい場合は、「networkText」と表示されます。

これは、以下の私のコードです：

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

出典

2016-10-08 jiexishede

- ここで ' {{displayText}}'は 'resultView'にありますか？ –

resultViewに{{displayText}}を表示します。 – jiexishede

[my answer]（http://stackoverflow.com/a/39928897/2545680）を参照してください。 –

あなたが分離株スコープが必要な場合は、2つのオプション最初のオプションは次のようにコールバックupdateDisplayTextを使用することですがあります。

JSが

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>

第二のアプローチは、このように、オブジェクトとしてdisplayValueを作るために次のようになります。

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入力がフォーカスされたときに `networkText`を表示したいです

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

出典

2016-10-08 05:09:03

`displayText`を変更し、入力をフォーカスするときに` displayText`を表示する方法は？

答えて

関連する問題