javascript - 在指令中定义 ng-model 后，Angularjs ng-model 不起作用

Question

我希望根据输入的名称自动创建输入的 ng-model。这是因为 MVC 中的 Html.TextBoxFor 等创建了正确的名称来将输入绑定(bind)到服务器端模型。为了减少用户因必须在 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'];