隔離されたスコープのコントローラーを使用した双方向バインド

Question

ユーザーがUPDATEをクリックすると、EmployeeIdのフィールドが表示され、変更の際にdirectiveのemployeeIdフィールドがコントローラーに直接バインドされる必要があります。スコープを切り離しても、コントローラーのemployeeIdは変更されません。もしそうでなければ、すべてのディレクティブがトグルされます。

Plunker：https://plnkr.co/edit/aq06WnfniN51iR7ZtFLc?p=preview

コード：私は現在、あなたを理解していれば

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

app.controller('MainCtrl', function($scope) { 
    $scope.employeeId = 'Josh' 
    $scope.employeePin = '1234' 

    $scope.updateFields = function() { 
     alert(1); 
    } 
}); 

app.directive('crudEmp', function($parse) { 
    var html = '<div class="form-inline">\ 
        <input type="text" class="form-control"\ 
         placeholder="Employe ID"\ 
         ng-model="employeeId"\ 
         required\ 
         ng-show="isEditing"/>\ 
        <input type="password" class="form-control"\ 
         placeholder="Employe PIN"\ 
         ng-model="employeePin"\ 
         ng-show="user.AdminSecurity && isEditing"\ 
         ng-required="user.AdminSecurity"\ 
         disabled/>\ 
        <div class="col-md-12 text-right noPadding pt10 operationButtons" id="opBtn">\ 
         <div class="col-md-12 noPadding" ng-hide="isEditing">\ 
          <button class="btn btn-info" ng-click="toggleEditing()">Edit</button>\ 
         </div>\ 
         <div class="col-md-12 text-right noPadding" ng-hide="!isEditing">\ 
          <button class="btn btn-success mr80 updateBtn" ng-click="ctrl.onClick(); toggleEditing()" ng-disabled="ctrl.valid">Update</button>\ 
          <button class="btn btn-warning" ng-click="toggleEditing()">Cancel</button>\ 
         </div>\ 
        </div>'; 

    return { 
     restrict: 'E', 
     template: html, 
     replace: true, 
     bindToController: { 
      employeeId: '=', 
      employeePin: '=', 
      valid: '=', 
      onClick: '&', 
     }, 
//  scope: true, // When i make the scope true, it doesnt change the EmployeeId defined in the controller 
     link: function(scope, element, attr){ 
      scope.onClick = attr.onClick; 

      scope.toggleEditing = function() { 
       scope.isEditing = !scope.isEditing; 
       if(scope.isEditing){ 
        element.closest('form').find(':input:not(.operationButtons button)').attr('disabled', false); 
        var getAllInputs = element.closest('form').find(':input').filter(':visible:enabled'); 
        if(getAllInputs[0]){ 
         getAllInputs[0].focus(); 
        } 
       }else{ 
        element.closest('form').find(':input:not(.operationButtons button)').attr('disabled', true); 
       } 
      }; 
     }, 
     controllerAs: 'ctrl', 
     controller: function($scope) { 
      var ctrl = this; 

      ctrl.onClick = function() { 
       $scope.$eval($scope.onClick); 
      }; 
     }, 
    }; 
}); 

Answer 1

それは変えることによって解決されるだろう：

... 
      restrict: 'E', 
      template: html, 
      replace: true, 
      bindToController: { 
       employeeId: '=', 
       employeePin: '=', 
       valid: '=', 
       onClick: '&', 
      }, 
    //  scope: true, // When i make the scope true, it doesnt change 

へ：

... 
     restrict: 'E', 
     template: html, 
     replace: true, 
     scope: { 
      employeeId: '=', 
      employeePin: '=', 
      valid: '=', 
      onClick: '&', 
     }, 
    ... 

することができますve https://plnkr.co/edit/Xia8BhlfFJ6mqgLjaoOp?p=preview