个人中心
gpt4 book ai didi

javascript - 在基本 Angular Directive(指令)中定义隔离范围时无法获得 '&' 前缀

转载 作者：行者123 更新时间：2023-11-30 11:32:14 25 4
gpt4 key购买 nike

我正在研究 Angular 指令，但在使用隔离范围时遇到了麻烦。我正在制作一个非常基本的指令/ Controller ，并只是试图通过将范围属性设置为“&”前缀来在指令内对 ng-click 发出警报。我已经盯着它看了 45 分钟了，看不出我做错了什么，但是单击按钮时没有任何反应(虽然其他 2 个前缀正在工作)。这是指令/ Controller 的代码:

(function() {
    'use strict';
    angular
        .module('mePracticing')
        .directive('practiceDirective', practiceDirective);

    function practiceDirective() {
        var directive = {
            restrict: 'AE',
            scope: {
                movie: '=',
                rating: '@',
                display: '&'
            },
            template: '<div>Movie: {{movie}}</div>' +
                "Enter a movie: <input type ='text' ng-model='movie'>" +
                "<div>Rating: {{rating}}</div>" +
                "<div><button ng-click='displayMovie(movie)'>CLICK ME</button></div>"
        };
        return directive;
    }
})();


(function() {
    'use strict';
    angular
        .module('mePracticing')
        .controller('practiceController', practiceController);

    function practiceController($scope) {
        $scope.movie = 'The Big Lebowski';
        $scope.rating = 1000101010;
        $scope.displayMovie = function(movie) {
            alert("Movie :" + movie);
        }
    }
})();

这是 HTML:

<html>
<head>
    <title>Directive Practice</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="mePracticing">
    <h1>HEADER</h1>

    <div ng-controller="practiceController">
        <practice-directive movie="movie" display="display(movie)" rating="{{rating}}"></practice-directive>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="myDirective.js"></script>
</body>
</html>

app.js 只是我创建模块的一行:

angular.module('mePracticing', []);

如果有人能给我任何关于“&”为什么不起作用的提示，我将不胜感激。谢谢!

编辑:我为它制作了一个 JSFiddle:https://jsfiddle.net/hozxz5n4/

最佳答案

发生这种情况是因为当您使用指令时没有名为“display”的函数，您需要传递声明的函数:

<practice-directive movie="movie" display="displayMovie(movie)" rating="{{rating}}"></practice-directive>

最后在指令中调用 display prop 函数:

(function() {
  'use strict';
  angular
    .module('mePracticing')
    .directive('practiceDirective', practiceDirective);

  function practiceDirective() {
    var directive = {
      restrict: 'AE',
      scope: {
        movie: '=',
        rating: '@',
        display: '&'
      },
      template: '<div>Movie: {{movie}}</div>' +
        "Enter a movie: <input type ='text' ng-model='movie'>" +
        "<div>Rating: {{rating}}</div>" +
        "<div><button ng-click='display()'>CLICK ME</button></div>"
    };
    return directive;
  }
})();

关于javascript - 在基本 Angular Directive(指令)中定义隔离范围时无法获得 '&' 前缀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45806706/

25 4 0
文章推荐： javascript - 如何处理没有构造函数的 JavaScript 对象
文章推荐： java - 从 FTPClient.getModificationTime() 解析日期字符串
文章推荐： java - 带有嵌入式 jetty 的 Servlet 3.0 文件上传(@MultipartConfig)
文章推荐： javascript - 与语义 UI react ，动态添加 Prop
行者123
个人简介

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

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