如何將數據從自定義指令視圖傳遞到控制器？

Question

指令模板的代碼///"textBox.html“

<div class="well">
    <label class="control-label">Text</label>
    <div class="controls">
        <input id="label" type="text" class="txt span3" ng-model="label" placeholder='Label for text field...'>
        <input type="text" class="span3" ng-model="value" placeholder='Default value...'>
        <input type="text" class="span3" ng-model="helpText" placeholder="Help text...">
        <input type="checkbox" class="span1"  ng-model="required" ng-true-value="true" ng-false-value="false">Required
        <input type="checkbox" class="span1"  ng-model="advanced" ng-true-value="true" ng-false-value="false">Advanced?
        <img src="../../images/bullet_cross.png" alt="Remove" style="cursor: pointer" id="text" border="0" ng-click="deleteField($event)">
    </div>

</div>

指令在html主頁面中使用了這樣的內容

//"algorithm.html"
<text-box></text-box>

自定義指令的控制器

//"controller.js"
var algorithm = angular.module('algorithmController',[]);

/***********directive to render text field***********/
algorithm.directive('textField' , function(){
    return{
        restrict: 'E',
        templateUrl: '../partials/algorithm/textBox.html',
        require: 'ngModel',
        replace: true,
        link: function(scope, iElement, iAttrs, ngModelCtrl) {
            // how should i get updated data(i.e. if user change after typing) over here entered by user??
        }
    };
});

Answer 1

您可以使用'='語法創建隔離范圍，這將創建兩種方式綁定到控制器和指令。 您甚至不必在指令中需要ngModel。

.directive("textField", function () {

        return {
            restrict : "E",
            template : "<input type='text' ng-model='val'/>",
            scope : {
                val : "="
            }
        };

    });

這是一個非常簡單的示例，可以完成您所請求的操作；

http://jsfiddle.net/smaye81/xaohrv53/2/