2017-05-24 6 views
0

角度を使用しています。チェックボックスをオンにすると、データフィールドのディレクティブ/タグの値を変更します。jQueryを使用して角度タグの値を変更する

<tbody data-ng-repeat="(contractIndex,contract) in contracts"> 
    <tr> 
    <td> 
     <div id="suppliername" data-strat-form-control data-field-display-id="1" data-vmformreadonly="true" data-show-tool-tip="showToolTip(contract.fields[4].htmlName)" data-strat-model="contract" data-field="(contract.hasOwnProperty('COMMIT_CONTRACT')) ? contract.fields[5] : contract.fields[4]"></div> 
    </td> 
    <td class="text-center"> 
     <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]" ng-click="$('#suppliername').attr('data-field', contract.fields[0]);" ></div> 
    </td> 
    <td> 
    </tr> 
</tbody> 

第2のdivはカスタムディレクティブ(data-field-display-id)によるチェックボックスです。しかし、クリックすると、1番目のdivのdata-fieldには何の影響もありません。

私は間違っていますが、どうすれば修正できますか?

編集:

角度バージョン:v1.2.28

ディレクティブ:

.directive("stratFormControl", function() { 
    return { 
     restrict: "A", 
     scope: { 
      field: '=', 
      fieldDisplayId: '=', 
      stratModel: '=', 
      vmformreadonly: '=', 
      showToolTip: '&' 
     }, 
     link: function (scope, elem, attrs) { 
      if (attrs.fieldDisplayId == 12) { 
       angular.forEach(scope.stratModel[scope.field.name], function (currentField, curFieldIndex) { 
        if (currentField == 1) { 
         scope.selected1 = true; 
        }; 
        if (currentField == 2) { 
         scope.selected2 = true; 
        }; 
        if (currentField == 3) { 
         scope.selected3 = true; 
        }; 
        if (currentField == 4) { 
         scope.selected4 = true; 
        }; 
       }); 
      }; 
      scope.checkClick = function (id) { 
       var pushItem = true; 
       angular.forEach(scope.stratModel[scope.field.name], function (currentField, curFieldIndex) { 
        if (currentField == id) { 
         scope.stratModel[scope.field.name].splice(curFieldIndex,1); 
         pushItem = false; 
        }; 
       }); 
       if (pushItem) { 
        scope.stratModel[scope.field.name].push(id); 
       }; 
      }; 
      scope.noOptions = function (id) { 
       scope.stratModel[scope.field.name] = []; 
      }; 
      if (scope.stratModel[scope.field.name]) 
       if(scope.stratModel[scope.field.name].length>0){ 
        scope.showOptionsInd = true; 
       }else{ 
        scope.showOptionsInd = false; 
       }; 
      scope.indicatorFieldText = scope.field.displayName.substring(0, scope.field.displayName.search('#')); 
      scope.optionsDisplay = scope.field.displayName.substring(scope.field.displayName.search('#') + 1); 
     }, 
     //X3 
     templateUrl: function (element, attrs) { 
      return baseUrl + 'JavaScript/Directives/Templates/Fields/' + attrs.fieldDisplayId + '.html'; 
     }, 
     replace: true//, 
     //compile: function (element) { 
      // Use the compile function from the RecursionHelper, 
      // And return the linking function(s) which it returns 
     // return RecursionHelper.compile(element); 
     //} 
    }; 
}) 
+0

バージョン、およびディレクティブのコードを追加してください。 – alphapilgrim

答えて

1

私はあなたがjQueryと角度を混合することにより、任意の普遍的な法律を壊していると信じているが、実際に私はありません物事を悪化させるだけだと思う​​。オブジェクト指向プログラミングと角度だけでは、私が思うに、最適なソリューションです:角度の

function DataField(_contract) { 
    var self = this; 
    this.contract = _contract; 
    this.chooseField = function() { 
    if (self.overrideField) { 
     return self.overrideField; 
    } 
    else { 
     return self.contract.hasOwnProperty('COMMIT_CONTRACT') ? self.contract.fields[5] : self.contract.fields[4]; 
    } 
    }; 

    this.click = function(field) { 
    self.overrideField = field; 
    }; 
} 

// assume this is a registered factory 
function DataFieldFactory() { 
    return { 
    newDataField: function(contract) { 
     return new DataField(contract); 
    } 
    } 
} 

function ParentController($scope, DataFieldFactory) { 
    angular.forEach(contracts, function(contract) { 
    contract.dataField = DataFieldFactory.newDataField(contract); 
    }); 
} 

マークアップ

<tbody data-ng-repeat="(contractIndex,contract) in contracts"> 
    <tr> 
    <td> 
     <div id="suppliername" data-strat-form-control data-field-display-id="1" data-vmformreadonly="true" data-show-tool-tip="showToolTip(contract.fields[4].htmlName)" data-strat-model="contract" data-field="contract.dataField.chooseField()"></div> 
    </td> 
    <td class="text-center"> 
     <div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]" ng-click="contract.dataField.click(contract.fields[0])" ></div> 
    </td> 
    <td> 
    </tr> 
</tbody> 
+0

お返事ありがとうございます。これはコントローラcorrectlに行くだろうか? –

+0

正しい。 'ParentController'はあなたのテンプレートのためのコントローラです。 –

関連する問題