-1

我的指令在其模板中包含一个简单的输入字段,我正在寻找一种解决方案来使用 ngModel 控制该输入字段,但我不知道该怎么做。

模板:

<input name="myInput" ng-model="myInput" type="text"/>

指令 JS:

app.directive('ghPca', ['$http', '$q', function($http, $q) {
  return {
    restrict    : 'E',
    templateUrl : '/javascripts/ang/directives/pca/gh-pca-template.html',
    scope       : {
      isEnable    : '='
    },
    link        : function($scope, $el, $attrs){
        //how can I manage/control the input of THIS directive? 
    }
  }
}]);

指令用途:

<gh-pca></gh-pca>

我不知道在控制器/链接中设置(写入)什么来绑定输入。有什么建议吗?

解决方案

我一直在寻找的解决方案就像下面的那个

app.directive('ghPca', ['$http', '$q', function($http, $q) {
      return {
        restrict    : 'E',
        templateUrl : '/javascripts/ang/directives/pca/gh-pca-template.html',
        scope       : {
          isEnable    : '='
        },
        link        : function($scope, $el, $attrs){
            //how can I manage/control the input of THIS directive? 
        },
        controller  : function($scope) {
             //here I can have control on my **$scope.myInput**
        }
      }
    }]);
4

1 回答 1

0

您可以理解如何控制输入字段的最基本方法是:-

<html ng-app="myApp">
<head>

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

</head>


<body>
<div ng-controller="MainCtrl">
<input name="myInput" ng-model="myInput" type="text"/><button type="submit" ng-click='sub()'>Submit</button>
{{data}}
</div>

<script>

    angular.module('myApp',[])

        .controller('MainCtrl',['$scope',function($scope){
           $scope.sub = function(){
                $scope.data = 'Hi'+ ' ' +$scope.myInput;
           }

        }]);

</script>
</body>
</html>

因此,在您的控制器中,您需要定义一些将要执行的功能,我在本示例中通过定义 ng-model 的范围所做的工作,我已将其分配给另一个名为 data 的范围并用 Hi 报价打印它,这就是非常基本的方法,这将让您了解如何使用它。

希望我让你明白这一点。谢谢!

于 2017-05-10T16:19:51.477 回答