AngularJS - 指令填充文本框，但 ng-model 没有值答案

【问题标题】：AngularJS - Directive populates textbox but ng-model doesn't have the valueAngularJS - 指令填充文本框，但 ng-model 没有值
【发布时间】：2016-03-07 15:50:04
【问题描述】：

我有一个带有指令的文本框。此自定义指令打开一个带有表单的模式，该表单可帮助用户从公司内部 API 中查找值。

表单使用所选值填充文本框。这完全符合预期。在文本框旁边，有一个触发功能的按钮。

目前，该函数仅触发一个alert，它根据ng-model 名称显示文本框的值。使用表单填充文本框中的值时，警报始终显示undefined。

但是，手动输入值是可行的，使用 jQuery 查找值也是如此。知道模型为什么不报告值变化以及如何解决它吗？

<input 
    id="txtAlias" 
    ng-model="sac.newUser" 
    type="text" 
    user-search />
<input 
    id="btnAdd" 
    type="button" 
    value="Add User" 
    class="btn btn-success btn-sm"
    ng-click="sac.AddUser()" />

这里是控制器的AddUser函数：

sac.AddUser = function () {
    //alert($('#txtAlias').val());
    alert(sac.newUser);
}

正如我所说，jQuery 版本在使用模态弹出表单插入文本框时可以毫无问题地找到该值。当使用模态弹出表单插入时，角度模型绑定将找不到文本框值，但在手动将值键入文本框时会找到。

有什么想法吗？

【问题讨论】：

你能出示你的指令吗？
Shashank：指令不是问题。它按预期工作。问题在于，当使用 angular 检测值时，父模型无法识别被指令放入文本框中的文本。但是，该值正在被 jQuery 识别。
是的@johneasley，这就是为什么我要求你展示你的指令，因为 jQuery 只在 DOM 元素上工作，而 Angular 为模型创建自己的结构。因此，jQuery 可以轻松地读取您文本框中的值，而您的指令应该有一些问题。
@ShashankAgrawal 好的，我明白了。不幸的是，该指令太长（2600 个字符），无法在评论中发布，因此我将尝试在对原始消息的回复中发布。

标签： javascript jquery angularjs

【解决方案1】：

根据要求，这里是原始指令的内容：

angular
.module('app')
.controller('userSearchModal', userSearchModal)
.directive('userSearch', userSearch);

function userSearch($compile, $uibModal) {

return {
    scope: {
        show: "="
    },
    controller: function ()
    {
        this.myusersearch = function (el) {

            var modal = $uibModal.open({
                animation: true,
                templateUrl: 'views/userSearchView.html',
                controller: 'userSearchModal',
                controllerAs: 'm',
                size: 'lg'
            });

            modal
                .result
                .then(function (selectedalias) {
                    $(el).val(selectedalias);
                });

        };

    },
    controllerAs: 'u',

    link: function (scope, element, attrs) {

        element.bind('focus', function () {

            var nextElement = element.parent().find('.openuserdialog').length;

            if (nextElement === 0) {

                var btn = '<img src="' + homePath + 'Images/zoomHS.png" ' +
                            'ng-click="u.myusersearch(&quot;#' + attrs.id + '&quot;)" ' +
                            'class="openuserdialog" />';

                element.after($compile(btn)(scope));

            }

        });

    }

};

};

userSearchModal.$inject = ['$uibModalInstance', '$http'];

function userSearchModal($uibModalInstance, $http) {

var modal = this;
var baseUrl = homePath + 'api/UserSearch/';
var getUrl = baseUrl + 'Get?firstname=';

modal.searching = false;
modal.progress = 'Searching...';
modal.showresults = false;

modal.search = function () {
    //Show the Searching... panel
    modal.searching = true;

    //Use the criteria to run a search
    $http.get(getUrl + modal.firstname + '&lastname=' + modal.lastname + '&alias=' + modal.alias)
        .success(function (data) {
            modal.users = data;
            modal.searching = false;
            modal.showresults = true;

            if (data.length === 0) {
                modal.progress = 'No employees found for those search parameters.';
                modal.searching = true;
                modal.showresults = false;
            }

            if (data.length > 29) {
                modal.progress = 'More than 30 employees were returned.  Please refine your search parameters.';
                modal.searching = true;
            }
        })
        .error(function (error) {
            toastr.danger(msgErrorOnGet + 'UserSearchController:  ' + error.message);
            modal.searching = false;
            modal.showresults = false;
        });

};

modal.select = function (u) {
    $uibModalInstance.close(u.Alias);
};

modal.cancel = function () {
    modal.firstname = '';
    modal.lastname = '';
    modal.alias = '';
    modal.mySearchForm.$setPristine();
    $uibModalInstance.dismiss();
};
};

【讨论】：