使用jQuery來更改Angular標記值

Question

我正在使用角度，並且當選中複選框時，我想更改數據字段指令/標記的值。

<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> 

第二個div是通過自定義指令（data-field-display-id）的複選框。但是當點擊時，第一格的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); 
     //} 
    }; 
}) 

Answer 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>