角1.5.8輸入自定義指令NG-模型

我一直在掙扎，圍繞谷歌搜索無處不在，我無法想象，爲什麼這個指令不更新我的控制範圍$值：指令：角1.5.8輸入自定義指令NG-模型

app.directive('ingFormField', function() { 
    return { 
     restrict: "E", 
     scope: { 
      value: "=", 
      fieldName: "@", 
      fieldLabel: "@" 
     }, 
     div class="form-group">'+ 
      ' <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>'+ 
      ' <input ng-model="value" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' + 
     '</div>' 
    }; 
});

應用於HTML

：

<ing-form-field field-name="Order" field-label="Order" ng-model="lateral.Order"></ing-form-field>

從我的控制器我的對象「橫向」：

$scope.lateral = {Order: "01", Name: "Person"}

我已經嘗試了一些從StackOverflow的函數使用鏈接函數來更新值在我的控制器$範圍中的相同的輸出的函數的一些函數：從$範圍的值到指令正在工作，但指令的輸入字段上的任何更改不更新$範圍對象「橫向」

來源

2016-11-22 Josep Alacid

您可以加入您放置該指令的HTML父代碼。 – alphapilgrim

這可能是有直接使用ngModel參數，並使之通過模板替代的形式給出。使用ngModel將幫助您保持模板上命名事件的一致性。

例如，如果您使用指令模板使用ngModel指令，則可以從指令作用域中調用它，並使用它將該模型反映到父控制器。

以下代碼實現此解決方案，請注意這是解決方案之一，您可能會找到不同的方法來實現此目的。

angular 
 
    .module('myApp', []) 
 
    .directive('ingFormField', function() { 
 
    return { 
 
     restrict: "E", 
 
     scope: { 
 
     ngModel: "=", 
 
     fieldName: "@", 
 
     fieldLabel: "@" 
 
     }, 
 
     template: '<div class="form-group">' + 
 
     ' <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>' + 
 
     ' <input ng-model="ngModel" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' + 
 
     '</div>' 
 
    }; 
 
    }) 
 
    .controller('myController', function($scope) { 
 
    $scope.lateral = { 
 
     Order: "01", 
 
     Name: "Person" 
 
    } 
 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 

 
<div ng-controller="myController"> 
 
    <ing-form-field field-name="Order" field-label="Order" ng-model="lateral.Order"> 
 
    </ing-form-field> 
 

 
    <pre>{{ lateral | json }}</pre> 
 

 
</div>

來源

2016-11-22 01:16:22

請參閱下面的代碼，您非常接近。我想你可能一直試圖使用ngModel來設置/傳遞值，而不是你爲它指定的作用域屬性，這是有價值的。那就是如果我理解正確。請讓我知道這是否有幫助，如果不是，我可以隨時更新。

function exampleController($scope) { 
 
    $scope.lateral = { 
 
    Order: "01", 
 
    Name: "Person" 
 
    }; 
 
} 
 

 
function ingFormField() { 
 
    return { 
 
    restrict: "E", 
 
    scope: { 
 
     value: "=", 
 
     fieldName: "@", 
 
     fieldLabel: "@" 
 
    }, 
 
    template: '<div class="form-group"> ' + 
 
     ' <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>' + 
 
     ' <input ng-model="value" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' + 
 
     '</div>' 
 
    }; 
 
} 
 

 
angular 
 
    .module('example', []) 
 
    .controller('exampleController', exampleController) 
 
    .directive('ingFormField', ingFormField);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div class="container-fluid" ng-app="example"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <ing-form-field field-name="Order" field-label="Order" value="lateral.Order"></ing-form-field> 
 

 
    </div> 
 
</div>

來源

2016-11-22 00:42:47 alphapilgrim

角1.5.8輸入自定義指令NG-模型

回答

相關問題