Question

现在，当我聚焦输入并模糊输入时，我需要显示不同的文本。

如果我在input上鼠标，我想更改displayText并显示displayText，然后它会显示单词＆＃34; networkText＆＃34;。< / p>

这是我的代码：

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

如果您需要隔离范围，则有两种选择第一个选项是使用回调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作为对象，如下所示：

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>

当我关注输入时，如何更改`displayText`并显示`displayText`？

1 个答案: