jiexishede jiexishede - 2 months ago 7
Javascript Question

How to change the `displayText` and display the `displayText` when I focus the input?

Now I need to display the different text when I focus the input and blur the input.

If I mouse down on the

input
, I want to change the
displayText
and display the
displayText
, then it will show the words "networkText".

This is my code below:

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

Answer

If you need an isolate scope, then there are two options The first option is to use callback updateDisplayText like this:

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>

The second approach would be to make displayValue as an object, like this:

JS

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>