javascript - 在 Angular Directive(指令)中动态包含标记上的函数

标签 javascript html angularjs angularjs-directive

在 angularjs 中创建一个新的元素指令。在部分模板的 HTML 标记中,我需要动态指定 ng-click 属性的函数。我尝试了多种方法来实现此目的,但所有方法都收到 $parse.syntax 错误。

我已经包含了最新尝试的代码,希望有人能告诉我我做错了什么。

指令模块:

(function(){

angular.module('scheduleDirective', [])

.directive('schedule', function() {
  return {
    restrict: 'E',
    scope: {
      person: '=',
          day: '=',
    },
    templateUrl: 'schedulepartial.html',
    controller: function($scope, $element,$attrs,$http){

        this.callToggle = "schedule.toggle(person, '" + $attrs.day + "')";
        this.setClass = '{' + "'active' : person[" + $attrs.day + "], 'btn-primary' : person[" + $attrs.day + '] }';

        this.toggle = function(person,day){         
              console.log("toggle" + person.name + day);  
            .
            .
            .
        s},
    controllerAs: 'scheduleDirCtrl'
  };
});

指令部分:

    <a href="#" class="btn btn-outline btn-sm"  ng-click= {{scheduleDirCtrl.callToggle}}  
        ng-class={{scheduleDirCtrl.setClass}}>{{day}}</a>

根据以下答案更新:

<a href="#" class="btn btn-outline btn-sm"  ng-click=scheduleDirCtrl.callToggle()  
            ng-class={{scheduleDirCtrl.setClass}}>{{day}}</a>

索引页的 HTML 标记:

<schedule person = person day="july25">July 25</schedule>

奇怪的是,ng-class 属性工作正常,但 ng-click 属性中的相同模式会生成 $parse.syntax 错误。

最佳答案

发生$parse.syntax错误是因为scheduleDirCtrl.callToggle不是函数类型。只需对 callToggle 执行类似的操作即可:

this.callToggle = function() {
    this.schedule.toggle(person, $attrs.day);
}

关于javascript - 在 Angular Directive(指令)中动态包含标记上的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30338385/

相关文章:

javascript - 在 click() 上显示特定的 <div>

angularjs - 当用户滚动到 Angular js中的div顶部时如何显示警报?

javascript - 将 Node Passport.js 用于多个网站

javascript - 使用angularJS参数从div调用函数

javascript - Sapper 在点击链接时不会重新加载数据

javascript - 如果页面上的 <h2> 标签等于某个文本字符串,如何将类添加到 ID?

jquery - 使用 jQuery 进行网络聊天

php - 只允许特定的 iOS 设备查看网站

Javascript Scorm 1.2 API

javascript - JS 中非 CSS3 浏览器的 CSS3 图像旋转微调器?