单元测试噶茉莉花语法错误：对＆QUOT解析错误;＆放大器;＆QUOT;角指令绑定 [英] Unit Test Karma Jasmine SyntaxError: Parse error on "&" Angular Directive binding

问题描述

我得到语法错误：在我的指令行解析错误在这里我想用一个＆安培;单程从父指示的方法结合

  myApp.directive（'datasourceDeleteBtn'，[功能（）{
返回{
    限制：'E'，
    更换：真实，
    模板：'＆所述; A HREF =＃＆GT;＆放大器;＃x2715＆下; / A＆GT;'，
    范围： {
        datasourceIndex：'@'，
        removeParentDiv：'和;'
    }，
    链接：链接
};功能链接（范围，元素，属性）{    element.bind（'点击'，功能（事件）{
        。事件preventDefault（）;
        scope.deleteDatasource（scope.datasourceIndex）;
    }）;    //通知家长指令
    scope.deleteDatasource =功能（datasource_index）{
        出现这种情况不包括//有条件的东西
        // {}传递值必须与＆amp;父作用域方法
        scope.removeParentDiv（{datasource_index}）;
    };
}
}]）;
 

HTML

 ＆LT;父DIV NG重复＆GT; //这只是一个样机不是字面
 ＆LT;数据源 - 删除 -  BTN数据源指数={{$指数}}删除父-DIV =removeParentDiv（）＆GT;＆LT; /数据源 - 删除 -  BTN＆GT;
 ＆LT; /父DIV＆GT;
 

这是通过removeParentDiv的NG-重复父DIV

  // parentDiv指令有这
    scope.datasources = [];
    scope.removeDatasourcePicker =功能（指数）{
        scope.datasources.splice（指数，1）; //即把它拿出来
    };
 

看来问题是，茉莉花不喜欢{}。删除在测试通过将支架的结果（因为带功放及典型错误;需要{}）。

解决方案

  

您收到错误，因为你正在传递JSON格式错误的
  方法

您还没有调用方法在指令范围 removeParentDiv通过了：'和; 正确地从指令。当你只是做 scope.removeParentDiv（{datasource_index}）; 这不会索引参数传递到方法

有关让它工作，你需要做一些改动。

1. 指令元素方法应该是

    删除父-DIV =removeParentDiv（指数）
    




2. 和而来自指令调用它，由于具有JSON结构，其中首页不过参数和 datasource_index 是它的价值。

     scope.removeParentDiv（{指数：datasource_index}）;
    




3. 不要调用运行后，消化周期 scope.deleteDatasource（scope.datasourceIndex）; 从点击方法事件，以便将更新范围绑定。

     element.bind（'点击'，功能（事件）{
       。事件preventDefault（）;
       scope.deleteDatasource（scope.datasourceIndex）;
       。范围$适用（）; //运行周期消化，保持同步绑定
   }）;
    

I get SyntaxError: Parse error at my directive line where I want to use a "&" one-way binding from a parent directive's method

myApp.directive('datasourceDeleteBtn', [function() {
return {
    restrict: 'E',
    replace: true,
    template: '<a href="#">&#x2715</a>',
    scope: {
        datasourceIndex: '@',
        removeParentDiv: '&'
    },
    link: link
};

function link(scope, element, attr) {

    element.bind('click', function(event) {
        event.preventDefault();
        scope.deleteDatasource(scope.datasourceIndex);
    });

    // Notify parent directive
    scope.deleteDatasource = function(datasource_index) {
        // conditional stuff that happens not included
        // {} required for passing values to "&" parent scope method
        scope.removeParentDiv({datasource_index});
    };
}
}]);

HTML

 <parent-div ng-repeat> // this is just a mockup not literal
 <datasource-delete-btn datasource-index="{{$index}}" remove-parent-div="removeParentDiv()"></datasource-delete-btn>
 </parent-div>

The parent div of the ng-repeat that passes removeParentDiv

    // parentDiv directive has this
    scope.datasources = [];
    scope.removeDatasourcePicker = function(index) {
        scope.datasources.splice(index, 1);  // ie take it out
    };

It seems the problem is that Jasmine does not like the { }. Removing the brackets results in the test going through (with typical errors since & requires {}).

解决方案

You are getting error because you are passing json in wrong format in method

You have not called method passed in directive scope removeParentDiv: '&' correctly from directive. As you are only doing scope.removeParentDiv({datasource_index}); which would not pass index parameter to the method.

For make it working, you need to do couple of changes.

1. Directive element method should be

   remove-parent-div="removeParentDiv(index)"
   

2. and while calling it from directive, by having json structure, where index is nothing but parameter and datasource_index is value of it.

   scope.removeParentDiv({index: datasource_index});
   

3. Do run digest cycle after calling scope.deleteDatasource(scope.datasourceIndex); method from click event so that it will update scope binding.

   element.bind('click', function(event) {
       event.preventDefault();
       scope.deleteDatasource(scope.datasourceIndex);
       scope.$apply(); //to run digest cycle, to keep binding in sync
   });
   

这篇关于单元测试噶茉莉花语法错误：对＆QUOT解析错误;＆放大器;＆QUOT;角指令绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！