将指令中的值传递给ng-model。 -angularjs

时间:2017-07-12 10:09:47

标签: javascript angularjs

您好我正在尝试创建一个指令来将一些值传递给我的ng-model, 在我的指令中,我的指令中有一个控制器,我想在我的ng-model中传递它的值

让我说我有一个字符串值,当我点击$ scope.speakUP时,它应该在ng-model上传递

.directive('speak', function(){
          return {
            restrict: 'A',
             require: 'ngModel',
            scope: true,
            template: '<i ng-click = "speakUP()" class="icon ion-mic-a larger"></i>',

            controller: function($scope, $element){
             $scope.speakUP = function(){

                     $scope.passThisString = "Sample Data";

                 }

        }

这是我的HTML

  <input type="text" ng-model="sampleModel" speak>

1 个答案:

答案 0 :(得分:2)

这是一个快速示例,您可以从中开始实现目标。

 app.directive('inputField', function () {
    return {
        require: '?ngModel',
        template: '<input ng-model="value" ng-change="onChange()"><i ng-click="speakUP()" class="icon ion-mic-a larger">click</i>',
        link: function ($scope, $element, $attrs, ngModel) {
            if (!ngModel) return;

            $scope.speakUP = function(){
              ngModel.$setViewValue('your data');
              ngModel.$render(); 
            }

           $scope.onChange = function() {
             ngModel.$setViewValue($scope.value);
           };

           ngModel.$render = function() {
             $scope.value = ngModel.$modelValue;
           };
        }
    };
});

HTML

<input-field name="sampleModel" ng-model="sampleModel"></input-field>