Question

查看代码： - mydir是我的自定义指令

<div ng-model="vdmodel" mydir="dataValue">                                  

</div>

我的指示： -

app.directive('mydir',['$translate',function($translate){



 return {
            restrict: 'A',
            transclude: true,
            scope: {dir:'=mydir'},
            compile: function(element, attrs) {
                return function(scope, element, attrs, controller){
                    var setTemplate = '';
                    var setOpt = '';                    

                    if(scope.dir.itemtype== 'NUMBER'){




                        setTemplate = '<input type="number" class="form-control form-font ng-animate ng-dirty"';
                        setTemplate +='" ng-model="dir[somevalue]" value="'+scope.sizing.somevalue+'" >';
                        element.html(setTemplate);
                    }
    }
  }
 }
});

指令中还有更多的表单元素，但是当我尝试在控制器函数中提交和收集值时，我什么也得不到。我做错了什么以及收集表单值的最佳方法是什么？

Answer 1

你需要做一些安静的改变

1.如果您正在使用隔离范围，请将ngModel传递给指令

scope: {dir:'=mydir', ngModel: '='},

2.按照最佳实践，ngModel必须始终有一个点

ng-model="params.vdmodel"

3.确保初始化控制器中的params对象

$scope.params = {}

Answer 2

通常，指令与父控制器共享相同的范围，但由于您在指令中定义了范围，因此它设置了自己的隔离范围。现在，由于控制器和指令具有独立的范围，因此您需要一种在它们之间共享数据的方法，现在通过使用数据来完成：＆＃34; =＆＃34;在范围内。

应用代码

var myApp = angular.module('myApp', []);

myApp.controller('myController', function ($scope, $http) {
    $scope.vdmodel = {};
})
    .directive("mydir", function () {
    return {
        restrict: "A",
        scope:{
            data:"=model",
            dir:'=mydir'
        },
        templateUrl: 'test/form.html'
    };
    });

form.html

<form>
        Name : <input type="text" ng-model="data.modelName" /><br><br>
        Age : <input type="number" ng-model="data.modelAge" /><br><br>
        Place : <input type="text" ng-model="data.modelPlace" /><br><br>
        Gender: 
                <input type="radio" ng-model="data.modelGender" value="male"/>Male<br> 
                <input type="radio" ng-model="data.modelGender" value="female"/>Female<br><br><br>
</form>

page.html

<div ng-app="myApp" >
    <div ng-controller="myController" >
        <div model="vdmodel" mydir="dataValue"></div>

        <h3>Display:</h3> 
        <div>
            <div>Name : {{myData.modelName}} </div><br>
            <div>Age : {{myData.modelAge}}</div><br>
            <div>Place : {{myData.modelPlace}}</div><br>
            <div>Gender : {{myData.modelGender}}</div><br>
        </div>
    </div>
</div>

Answer 3

您需要使用$compile服务来编译模板并与当前范围链接，然后再将其放入element。

.directive('mydir', function($compile) {
  return {
    restrict: 'A',
    transclude: true,
    scope: {
      dir: '=mydir'
    },
    link: function(scope, element, attrs, controller) {
      var setTemplate = '';
      var setOpt = '';

      if (scope.dir.itemtype == 'NUMBER') {
        setTemplate = '<input type="number" class="form-control form-font ng-animate ng-dirty"';
        setTemplate += '" ng-model="dir.somevalue" value="' + scope.dir.somevalue + '" >';

        element.html($compile(setTemplate)(scope));
      }
    }
  }
});

请参阅下面的plunker以获取完整的工作示例。

Plunker： http://plnkr.co/edit/7i9bYmd8blPNHch5jze4?p=preview

当我使用指令动态创建表单时，ng-model不与控制器的$ scope绑定。

3 个答案: