javascript - 使用 jQuery 更改 Angular 标签值

Question

我正在使用 Angular，当选中一个复选框时，我想更改数据字段指令/标签的值。

<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) 实现的复选框。但单击时，对第一个 div 的数据字段没有影响。

我做错了什么以及如何解决它？

编辑:

Angular 版本: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 和 Angular 来违反任何普遍法则，但我真的认为这只会让事情变得更糟。我认为，面向对象编程和 Angular 本身就是最好的解决方案:

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>