Question

我希望根据输入的输入名称自动创建输入的ng模型。这是因为MVC中的Html.TextBoxFor等创建了将输入绑定到服务器端模型的正确名称。为了减少用户错误而不必将确切的字符串重新键入ng-model，我希望我的团队只需要一个指令就可以创建它。我在stackoverflow上找到了这个代码。

datatableApp.directive('automaticangularmodelbinding', function ($compile) {
            return {
                restrict: 'A',
                replace: false,
                priority: 10000,
                terminal: true, // these terminal and a high priority will stop all other directive from being compiled at first run,
                scope: {
                    automaticangularmodelbinding: '@@'
                },
                link: function (scope, element, attrs) {                    
                    attrs.$set('ngModel', (scope.automaticangularmodelbinding != '') ? (scope.automaticangularmodelbinding + '.' + attrs.name) : attrs.name); // set value of ng-model to be the same as the name attribute
                    attrs.$set('automaticangularmodelbinding', null); // remove itself to avoid a recusion

                    $compile(element)(scope); // begin compiling other directives
                }
            };
        });

这样可以使用元素的名称创建ng-model。但是，当我从服务器中提取数据并进行设置时，输入不会填入数据。如果我取出自动指令并通过ng-model正常定义它，它确实有效。

我的服务器代码下拉。

$scope.getEditStreet = function (streetID) {
                $http.post('@Url.Action(Model.GetFormControllerFunctionName, Model.GetFormControllerName)', "{ @Model.JavascriptEditPropertyName : " + streetID + "}").then(function (response) {                    
                    $scope.editFormData = response.data.ResultObject;
                    $scope.$apply();                        
                }, function (response) {
                    alert("fail" + response.statusText);
                });
            };

使用ng-model，我需要使用scope.apply调用来获取要检查的复选框。使用此自动版本后，scope.apply错误。如果我删除范围适用虽然它甚至在文本框上仍然不起作用，即使在没有应用之前有效。

似乎事实上我在事后添加了ng-model，它的工作方式与从一开始就没有相同的方式。我怎样才能让它发挥作用？

修改

阅读zaitsman评论后，最终版本的工作原理如下。我从指令中删除了范围，并使用了attrs ['automaticangularmodelbinding']来传递我需要的数据。

datatableApp.directive('automaticangularmodelbinding', function ($compile) {
            return {
                restrict: 'A',
                replace: false,
                priority: 10000,
                terminal: true, // these terminal and a high priority will stop all other directive from being compiled at first run,
                link: function (scope, element, attrs) {                    
                    attrs.$set('ngModel', (attrs['automaticangularmodelbinding'] != '') ? (attrs['automaticangularmodelbinding'] + '.' + attrs.name) : attrs.name); // set value of ng-model to be the same as the name attribute
                    attrs.$set('automaticangularmodelbinding', null); // remove itself to avoid a recusion

                    $compile(element)(scope); // begin compiling other directives
                }
            };
        });

Answer 1

如上所述，我建议您跳过隔离范围，以便可以使用指令声明范围内的变量。要访问传递给指令的值，可以使用attrs对象。

因此，请完全从指令中删除scope，然后在link函数中获取值：

var myPara = scope[attrs['automaticangularmodelbinding']];

，它将包含来自父作用域的extraParameterInFront。

如果该参数只是一个字符串，那就更容易了：

var myPara = attrs['automaticangularmodelbinding'];

在指令

1 个答案: