在具有隔离范围的指令中与控制器的两种方式绑定

Question

我正在开发一个指令，当用户单击 UPDATE 时，将显示一个 EmployeeId 字段，并且指令上的 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: '&',
        },
    ...

您可以在我的 plunker 中验证行为：https://plnkr.co/edit/Xia8BhlfFJ6mqgLjaoOp?p=preview