Question

我对Angular没有那么多经验，所以任何人都可以提供帮助：

我有一些指令实例。当我点击粉红色方块时，文本在所有实例中都会更改。我如何才能在我之前点击的那个实例中更改文本？

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <style>
        .placeToClick {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<my-dir index="1"></my-dir>
<my-dir index="2"></my-dir>
<my-dir index="3"></my-dir>
<my-dir index="4"></my-dir>
<my-dir index="5"></my-dir>
<div class="placeToClick"></div>

<script>
    var app = angular.module("app", []);

    app.directive("myDir", function(){
        return {
            restrict: "E",
            scope: {
                index: '='
            },
            template: '<div style="width: 100px; border: 2px solid black; padding: 5px; margin: 20px;" ng-click="changeText(index)">{{text}}</div>',
            link: function(scope, elem, atts){
                var place = angular.element(document.querySelector('.placeToClick'));
                scope.text = 'Some text';

                place.on('click', function(){
                    scope.text = 'Text is changed';
                    elem.css('color', 'red');
                    scope.$apply();
                });

                scope.changeText = function(index){
                    scope.text = 'Text in index ' + index + ' changed'
                }
            }
        }
    });
</script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <style>
        .placeToClick {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<my-dir index="1"></my-dir>
<my-dir index="2"></my-dir>
<my-dir index="3"></my-dir>
<my-dir index="4"></my-dir>
<my-dir index="5"></my-dir>
<div class="placeToClick"></div>

<script>
    var app = angular.module("app", []);

    app.directive("myDir", function(){
        return {
            restrict: "E",
            scope: {
                index: '='
            },
            template: '<div style="width: 100px; border: 2px solid black; padding: 5px; margin: 20px;" ng-click="changeText(index)">{{text}}</div>',
            link: function(scope, elem, atts){
                var place = angular.element(document.querySelector('.placeToClick[index="'+scope.index+'"]'));
                scope.text = 'Some text';

                place.on('click', function(){
                    scope.text = 'Text is changed';
                    elem.css('color', 'red');
                    console.log('dg');
                    scope.$apply();
                });

                scope.changeText = function(index){
                    scope.text = 'Text in index ' + index + ' changed'
                }
            }
        }
    });
</script>
</body>
</html>

Answer 2

添加全局变量（仅适用于此情况的快速解决方案）：

    var place = angular.element(document.querySelector('.placeToClick'));
    place.css('cursor', 'pointer')
    scope.text = 'Some text';

    elem.on("click",function(){

      currentIndex=scope.index; //set this is current

    });

    place.on('click', function(){
        if (scope.index==currentIndex){

         //ok we are current so do the work
         scope.text = 'Text is changed';
         elem.css('color', 'red');
         scope.$apply();

        }
    });

更改链接方法的代码：

UILabel

Answer 3

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <style>
        .placeToClick {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<my-dir index="1"></my-dir>
<my-dir index="2"></my-dir>
<my-dir index="3"></my-dir>
<my-dir index="4"></my-dir>
<my-dir index="5"></my-dir>
<div class="placeToClick"></div>

<script>
    var app = angular.module("app", []);

    app.directive("myDir", function(){
        return {
            restrict: "E",
            scope: {
                index: '='
            },
            template: '<div style="width: 100px; border: 2px solid black; padding: 5px; margin: 20px;" ng-click="changeText(index)">{{text}}</div>',
            link: function(scope, elem, atts){
                window.currentIndex = 0;
                var place = angular.element(document.querySelector('.placeToClick[index="'+scope.index+'"]'));
                scope.text = 'Some text';

                place.on('click', function(){
                    if(scope.index = window.currentIndex){
                        scope.text = 'Text is changed';
                        elem.css('color', 'red');
                        console.log('dg');
                        scope.$apply();
                    }

                });

                scope.changeText = function(index){
                    scope.text = 'Text in index ' + index + ' changed'
                    window.currentIndex = index;
                }
            }
        }
    });
</script>
</body>
</html>

没有

如何触发一个指令实例

3 个答案: