Question

我有行和列如下：

      <ul class="ulgen clearfix" >
        <li class="clearfix" ng-repeat='game in games| limitTo:limitrows'> 
           <div class="col1">{{game.id}}</div>
           <div class="col2">
              <span winner1 id="g{{$parent.$index+game.id}}1" ng-click="check($parent.$index,game.id,1)" data-row="{{game.id}}" data-col="{{$parent.$index+1}}" data-type="1" data-checked="0" class="gamebtncommen">
                 {{game.value| split:'-':0}}
              </span>
           </div> 
           <div class="col3">
              <span winner1 id="g{{$parent.$index+game.id}}0" ng-click="check($parent.$index,game.id,0)" data-row="{{game.id}}" data-col="{{$parent.$index+1}}" data-type="0" data-checked="0" class="gamebtncommen">X</span>
           </div> 
           <div class="col4">
              <span winner1 id="g{{$parent.$index+game.id}}2" ng-click="check($parent.$index,game.id,2)" class="gamebtncommen" data-row="{{game.id}}" data-col="{{$parent.$index+1}}" data-type="2" data-checked="0">
                 {{game.value| split:'-':1}}
              </span>
           </div>
        </li>

然后我建立了这个指令：

   tmControllers.directive('winner1', function() {
return {
  restrict: 'A',
  link: function(scope, element, attrs) {
     scope.check = function(col, row, type) {
        col++;
        console.log(element);
        var el = element//$('.gamebtncommen[data-row="' + row + '"][data-col="' + col + '"][data-type="' + type + '"]');
        if (el.hasClass('orangeback')) {
           el.removeClass('orangeback');
           element.attr('data-checked', 0);
           scope.clacprice();
        } else {
           el.addClass('orangeback').data('checked', 1);
           element.attr('data-checked', 1);
           scope.clacprice();
        }
     }

     scope.clacprice = function() {

        var siz = $('.gamebtncommen[data-col="1"][data-checked="1"]').size();

        console.log(siz);

问题是在检查跨度时行正在获得相同的范围，我希望该指令将更改每个跨度数据，每行检查数据1，而如果检查3个跨度则将其表示为3 / p>

Answer 1

您应该定义指令的范围属性。如果您不了解指令范围，那么我们可以通过三种方式定义指令的范围，这是

隔离范围
继承范围，
相同/父级范围。

默认情况下，所有指令都具有相同/父范围（第三个选项）。您可以在scope-in-angularjs博客上查看有关指令范围的更多信息。

Answer 2

在指令中创建隔离范围在指令中隔离范围是一个简单的过程。首先将scope属性添加到指令中，如下所示。这会自动将指令的范围与任何父范围隔离开来。

tmControllers.directive('winner1', function () {
    return {
        scope: {},

    };
});

更好地理解范围指令

2 个答案: