Question

我是角度JS的新手。我有主要形式它有文本框和一个有复选框的指令。如果用户将一些文本添加到文本框或修改复选框的初始状态，当用户单击确定按钮时，我必须检查脏标志并提示用户未保存的更改。这是我的plunk 我必须使用角1.3.16版本。的的script.js：

// Code goes here
(function() {
  "Use Strict";


  angular.module('myapp', []);

  angular.module('myapp').
  controller('myappctrl', function($scope) {

    $scope.user = {
      list: [{
        id: 1,
        value: 'chkbox1',
        selectedReturnType: false
      }, {
        id: 2,
        value: 'chkbox2',
        selectedReturnType: true
      }, {
        id: 3,
        value: 'chkbox3',
        selectedReturnType: false
      }, {
        id: 4,
        value: 'chkbox4',
        selectedReturnType: true
      }, ]
    };

    $scope.ok = function() {
      if ($scope.mainform.$dirty) {
        alert('form modified');
      }
    };
  });




  angular.module('myapp').directive('checkboxdir', function() {
    return {
      templateUrl: "checkboxdir.html",
      restrict: 'EA',
      scope: {
        user: '='
      }
    }
  });


}());

的index.html：

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link rel="stylesheet" href="style.css" />
     <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>

    <script src="script.js"></script>
  </head>

  <body  ng-controller="myappctrl">
    <form name="mainform" novalidate>
    <checkboxdir user='user'></checkboxdir>
    <input type="text" />
    <input type="button" value="ok" ng-click="ok()"/>
    </form>
  </body>

</html>

指令：

<div>
  <form name='returntypeform' novalidate>
    <div ng-repeat='item in user.list'>
    <input type='checkbox' ng-checked="item.selectedReturnType" />
    <label>{{item.value}}</label>
    </div>
  </form>
</div>

需要将复选框检查/取消选中子指令传递给父级。知道为什么这不起作用吗？

Answer 1

你错过了ng-model。我更新了plunker： plunker

<body  ng-controller="myappctrl">
    <div ng-form="mainform">
    <checkboxdir user='user'></checkboxdir>
    <input type="text" data-ng-model="model"  name="text"/>
    <input type="button" value="ok" ng-click="ok()"/>
    </div>
  </body>

<div>
  <form name='returntypeform' novalidate>
    <div ng-repeat='item in user.list'>
    <input type='checkbox' 
    name="$index"
    data-ng-model="item.selectedReturnType"
    ng-checked="item.selectedReturnType" />
    <label>{{item.value}}</label>
    </div>
  </form>
</div>

将$ dirty标志从子表单中的指令传递给父表单

1 个答案: