使用控制器的屬性/方法

Question

我具有各種輸入（包括後面將要說明的指令）如：

<input mask-value="ssn" validate="checkSsn"/> 
<input mask-value="pin" validate="checkPin"/> 

這些屬性是在所述控制器：

app.controller("Ctrl", ['$scope', function ($scope) { 
    $scope.ssn = ""; 
    $scope.pin = ""; 

    $scope.checkSsn = function() { /* validate $scope.ssn */ }; 
    $scope.checkPin = function() { /* validate $scope.pin */ }; 
}]); 

最後， maskValue指導意見：

app.directive("maskValue", function() { 
    return function (scope, element, attrs) { 
     /* does some focus/blur magic and string replacement */ 
     scope[attrs.maskValue] = this.value; 
     scope[attrs.validate](); 
    }; 
}); 

這是有效的，但它似乎是對我的角度誤用。相反，它會更有意義使用一個孤立的範圍爲：

scope: {validate: "&"} 

然後，我可以用scope.validate()代替scope[attrs.validate]()。 但是，與隔離範圍我不能更新控制器中的相應值。使用{maskValue: "="}不起作用，因爲這會嘗試更新父級的maskValue屬性而不是特定值。我認爲使用{ssn: "="}可以工作，但是我必須更新控制器的特定屬性，而不是將其設置爲使指令不靈活的指令屬性。顯然使用$parent也不建議。

我該如何動態訪問控制器內部的隔離範圍指令？

• 示例工作代碼：http://jsfiddle.net/MmyvX/
• 嘗試什麼，我想實現（不工作）：http://jsfiddle.net/MmyvX/1/

編輯：我不能投入使用ng-model=ssn等。因爲在mask-value的焦點/模糊事件期間，輸入的實際值發生了變化。例如，它可能會變成*****####，但我需要在某處存儲實際值#########，並且控制器似乎是適當的地方，因爲控制器稍後會將其用於其他原因。

Answer 1

<div ng-app=foo> 
    <div ng-controller=Ctrl> 
    {{ssn}} 
    <input mask-value="ssn" validate="checkSsn()"> 

app = angular.module("foo", []); 

app.controller("Ctrl", ['$scope', function ($scope) { 
    $scope.ssn = ""; 
    $scope.checkSsn = function() { console.log($scope.ssn); }; 
}]); 

app.directive("maskValue", function() { 
    return { 
     scope: { 
      validate: "&", 
      maskValue: "=" 
     }, 
     link: function (scope, element, attrs) { 
      element.bind("change", function() { 
       scope.maskValue = this.value; 
       scope.$apply(); 
       scope.validate(); 
      }); 
     }, 
    }; 
}); 

http://jsfiddle.net/bfDqy/

編輯：

他們說它是bett呃通過，要評估的，因爲在Anguular一些錯誤處理特點的參數$apply表達：

var value = this.value; 
scope.$apply(function() { 
    scope.maskValue = value; 
}); 

Answer 2

我很抱歉，但爲什麼不只是這樣做：

app = angular.module("foo", []); 

app.controller("Ctrl", ['$scope', function ($scope) { 
    $scope.ssn = ""; 
    $scope.validate = function() { console.log($scope.ssn); }; 
}]); 

app.directive("maskValue", function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.bind("change", function() { 
       scope.validate(); 
      }); 
     }, 
    }; 
}); 

和HTML這樣的：

<div ng-app=foo> 
    <div ng-controller=Ctrl> 
     <input ng-model="ssn" mask-value /> 
    </div> 
</div> 

Answer 3

我知道你已經得到的回答你的問題，但我認爲這是值得一提的由於您似乎正在進行一些驗證，您可以使用Angular的內置功能來執行此操作，但仍然可以使用ng-model。這裏有一個例子：

app.directive("maskValue", function ($parse) { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 
     if (!ngModel) return; 
     var validator = $parse(attrs.validator)(scope); 

     ngModel.$render = function() { 
     var hasFocus = document.activeElement == element[0]; 
     if (ngModel.$valid || hasFocus) element.val(ngModel.$modelValue) 
     else element.val('#######'); 
     }; 

     element.bind('blur', function() { 
     ngModel.$setValidity('maskValue', validator(this.value)) 
     ngModel.$render(); 
     }); 

     element.bind('focus', function() { 
     ngModel.$render(); 
     }); 
    } 
    }; 
}); 

該指令，以便與ng-model一道，控制視圖如何更新使用NgModelController。在這個人爲的例子中，當元素失去焦點並且驗證函數返回false時，它會簡單渲染########。但是當控制再次聚焦時，它將呈現其真實價值，以便用戶可以改變它。請注意，綁定到控件的作用域的屬性在其視圖隨元素狀態（有效或無效）發生相應更改時保持不變。你可以看到一個工作示例here。