AngularJS：指令中的 2 种方式绑定

Question

我有一个指令如下，

    var myApp = angular.module('myApp', []);

    myApp.directive("checkTextCombo", [
      "$compile", function($compile) {
        return {
          restrict: "E",
          replace: true,
          scope: {
            source: '@',
         },
         link: function(scope, element, attrs) {
           scope.rows = eval('(' + scope.source + ')');
         },
          templateUrl: "../templates/check-text-combo/check-text-combo.html",
          controller: function($scope){
            $scope.$watch('$scope.rows', function() {
              console.log($scope.rows);
            });
          }
        };
      }
    ]);

还有一个模板：

  <div ng-repeat="row in rows">
    <input type="checkbox" ng-checked="row.checked"/> <label value="{{row.label}}">{{row.label}}</label><input type="textbox" value="{{row.value}}" ng-disabled="!row.checked"/>
  </div>

index.html 由

组成

   <check-text-combo source="[{'value':'varsh','label':'name','checked': true}, {'value':'bij','label':'name','checked': false}]"></check-text-combo>

我的问题是，我可以使用 ng-repeat 创建模板，但绑定后，当我更改模板中的某些内容时，其他地方不会更改。如何获取修改后的值？

Answer 1

您应该更改您的 $watch 定义：

$scope.$watch('rows', function() {
//              ^
//             Here
//    rows instead of $scope.rows
  console.log($scope.rows);
}, true);
//  ^
//and here
// third parameter to true - observed variable is an Object

Answer 2

添加 ng-model 后它开始工作了

<div ng-repeat="row in rows">
  <input type="checkbox" ng-checked="row.checked" ng-model="row.checked"/> <label value="{{row.label}}">{{row.label}}</label><input type="textbox" value="{{row.value}}" ng-model="row.value" ng-disabled="!row.checked"/>
</div>

AngularJS：指令中的 2 种方式绑定

AngularJS: 2 way binding in directive

data-binding

angularjs

angularjs-directive