个人中心
gpt4 book ai didi

javascript - 执行 AngularJS 代码中作为属性提供的回调方法

转载 作者：行者123 更新时间：2023-12-04 01:53:27 24 4
gpt4 key购买 nike

我有下面的 AngularJS 代码，我试图在其中提供一个名为 callback 的回调函数。我想在我的 AngularJS 代码中执行这个方法，但是我能想到的所有可能的方法都失败了，即 

scope.callback();
scope.$apply(scope.callback());

我该怎么做才能执行提供的回调(在本例中为 someFunction)？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript">
    // module
    var starApp = angular.module('starApp', []);

    // directive
    starApp.directive('rating', function() {
        // directive definition object
        return { 
            // used as an attribute or element
            restrict: 'AE', 
            // ng-class: for each key-value pair of the object with a truthy value the corresponding key is used as a class name
            // ng-click: custom behavior when an element is clicked
            // ng-repeat: update templates when collection items are inserted/removed
            template: '<ul class="rating">' +
                      '<li ng-repeat="star in starArray" ng-class="star" ng-click="toggle($index)">' +
                      '\u2605' +
                      '</li>' +
                      '</ul>',
            // variables in scope of directive (passed in from HTML)
            scope: { 
                stars: '=stars', // '=' values of corresponding attributes
                max: '=max',
                callback: '&'
            },
            // executed after the template has been cloned and holds directive logic
            link: function(scope, elem, attrs) {

                var updateStars = function() {
                    scope.starArray = [];
                    for (var i = 0; i < scope.max; i++) {
                        scope.starArray.push({
                            filled: i < scope.stars
                        });
                    }
                };

                scope.toggle = function(index) {
                    scope.stars = index + 1;
                };

                scope.$watch('stars', function(oldValue, newValue) {
                    if (newValue) {
                        updateStars();
                    }
                });
            }
        }
    });

    var someFunction = function() {
        alert("test");
    };
</script>
<link rel="stylesheet" href="rating.css"/>
</head>
<body ng-app="starApp">
    <rating stars="3" max="5" callback='someFunction'/>
</body>
</html>

最佳答案

我明白你想要完成什么，但它不能像这样工作 - 你的回调函数应该是指令的父范围 - 即在 Angular Controller 中，而不仅仅是全局窗口范围中的某个地方。

& binding is for passing a method into your directive's scope so that it can be called within your directive. The method is pre-bound to the directive's parent scope, and supports arguments. For example if the method is hello(name) in parent scope, then in order to execute the method from inside your directive, you must call $scope.hello({name:'world'})

来自:What is the difference between '@' and '=' in directive scope in AngularJS?

因此，如果您在模板中将范围属性称为“回调”:

<body ng-app="starApp">
  <div ng-controler="test">
    <rating stars="3" max="5" callback='someFunction()'/>
  </div>

那么你应该有一个 Controller 

 starApp.controller("test", function( $scope ){
    $scope.callback = function(){
      //does smth
    };
});

并相应地修改您的指令以调用 someFunction

starApp.directive('rating', function() {
  //all other stuff
   link: function(scope, elem, attrs) {
    //here we call function of the controller
    scope.someFunction();

它的工作原理就像这个指令的链接someFunction调用controller中的callback函数

UPD如果你想调用一些任意函数，你可以通过将它的调用添加到你的 Controller 函数中来拥有它:

//you want to call this code, defined outside angular
window.test = function(alert('test'));

//in controller you do
$scope.callback = function(){
//does smth

//and also call our defined function
window.test();
};

关于javascript - 执行 AngularJS 代码中作为属性提供的回调方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33895412/

24 4 0
文章推荐： android-studio - Android Studio 3.6 中的 Gradle 同步失败导致无效类型代码 :85
文章推荐： NHibernate 3 - 状态如何？
文章推荐： amazon-web-services - ec2 机器有多稳定？
文章推荐： swt - 使用 JFace 数据绑定(bind)绑定(bind)单选按钮组的正确方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com