javascript - how to use $scope inside .on click event? - Thinbug

how to use $scope inside .on click event?

时间：2017-02-06 05:24:38

标签： javascript jquery angularjs

I'm very new to Angular js and am testing a few functions with a simple data-parser project (Plunkr)中使用[（ngModel）]。现在，我在点击事件的jQuery中访问$ scope变量时遇到了麻烦。我希望隐藏一些元素，直到单击图像。虽然我可以在控制器中将ng-hide设置为true，但$ scope似乎不适用于on click处理程序。请帮忙。

zodiac.html

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div id="container" ng-app="myApp" ng-controller="myCtrl">
        <div>
            <h1>What Animal Are You?</h1>
            <div id="selectPicture"></div>
        </div>
        <div id="zodiac" ng-hide="disappear">
            <h1>Your Zodiac</h1>
            <div id="your-zodiac">
            </div>
            <br>
            <h1>Avoid these Animals</h1>
            <div id="hateDiv">
            </div>
            <br>
            <h1>These Are Your Besties</h1>
            <div id="loveDiv">
            </div>
        </div>
        <script src="scripts.js"></script>
    </div>
</body>

scripts.js中

function d(c) {
    console.log(c)
}

var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope, $http) {
    $http.get('zodiac.json').success(function(data) {
        $scope.disappear = true //WORKS HERE
        $scope.animalsData = data
        angular.forEach($scope.animalsData, function(item) {
            $('#selectPicture').prepend('<img src="' + item.picture + '" alt="' + item.animal + '">')
        })
        $('#selectPicture').on('click', 'img', function($scope) {
            $scope.disappear = false //DOES NOT WORK HERE
            $('#zodiac div').empty();
            findZodiac(this.alt, "#your-zodiac", true);
        })

        function findZodiac(animal, e, test) {
            angular.forEach($scope.animalsData, function(item) {
                if (item.animal == animal) { //look for the right object 'item', when found, get the image
                    //item.picture
                    $(e).prepend('<img src="' + item.picture + '">')
                    if (test == true) {
                        loveHate(item.hate, "#hateDiv")
                        loveHate(item.love, "#loveDiv")
                    }
                    return
                }
            })
        }

        function loveHate(array, e) {
            angular.forEach(array, function(value) { //loops through an array, get each animal
                findZodiac(value, e, false)
            })
        }
    });

})

3 个答案:

答案 0 :(得分：3)

在我看来，使用AngularJS时不应直接进行DOM操作。请改用AngularJS提供的指令。如果您这样做，这是模板和控制器代码 -

zodiac.html

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div id="container" ng-app="myApp" ng-controller="myCtrl">
        <div>
            <h1>What Animal Are You?</h1>
            <div id="selectPicture">
                <img ng-repeat="animal in animalsData"
                     ng-src="{{animal.picture}}"
                     alt="{{animal.animal}}" 
                     ng-click="disappear=false; findZodiac(animal)" />
            </div>
        </div>
        <div id="zodiac" ng-hide="disappear">
            <h1>Your Zodiac</h1>
            <div id="your-zodiac">
                <img ng-src="{{selectedAnimal.picture}}" alt="{{selectedAnimal.animal}}" />
            </div>
            <br>
            <h1>Avoid these Animals</h1>
            <div id="hateDiv">
                <img ng-repeat="animal in selectedAnimal.hate"
                     ng-src="{{animal.picture}}"
                     alt="{{animal.animal}}" />
            </div>
            <br>
            <h1>These Are Your Besties</h1>
            <div id="loveDiv">
                <img ng-repeat="animal in selectedAnimal.love"
                     ng-src="{{animal.picture}}"
                     alt="{{animal.animal}}" />
            </div>
        </div>
        <script src="scripts.js"></script>
    </div>
</body>

scripts.js中

var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope, $http) {
    $scope.animalsData = [];
    $scope.selectedAnimal = {};
    $scope.disappear = true;

    $scope.findZodiac = function(animal) {
        $scope.selectedAnimal = animal;
    };

    $http.get('zodiac.json').success(function(data) {
        $scope.animalsData = data;
    });

});

答案 1 :(得分：0)

在AngularJS中， $ scope 是控制器的全局变量，您不需要像这样传递它。直接用它作为

Project Navigator -> Select Target -> Capabilities 

Enable KeyChain Sharing ON

答案 2 :(得分：0)

检查此corrected version

scope object only available in angular world.