javascript - Angular 指令和 http，模型不起作用

Question

当 $scope.instrumentNames 像提供的代码一样在 Controller 内部设置时有效

当 $scope.instrumentNames 在 HTTP success 函数中设置时，它不起作用

http 函数返回的数据是一个数组。

Console.log(data)//["Guitar", "Bass", "Violin"]
Console.log($scope.instrumentNames) //["Guitar", "Bass", "Violin"]

Controller

app.controller("PrivateProfileController",
    ["$scope", "$http", "$routeParams",  function( $scope, $http, $routeParams ) {

        $scope.instrumentNames = ["Guitar", "Bass", "Violin"];//WORKING !

        function loadInstrumentNames(){
            $http({
                url: '/Instrument/getInstrumentsName',
                method: "GET"
            }).success(function(data){
                //data = ["Guitar", "Bass", "Violin"]
                $scope.instrumentNames = data;//NOT WORKING 
            });
        }

        loadInstrumentNames()
    }]
);

指令

app.directive('autoComplete', [function($timeout) {
    return    {
        restrict: "A",
        link : function(scope, element, attrs) {
            element.autocomplete({
                source: scope[attrs.uiItems],
                select: function() {
                    $timeout(function() {
                      element.trigger('input');
                    }, 200);
                }
            });
        }
    };
}]);

模板

<input auto-complete ui-items="instrumentNames">

这就像指令在 http success 完成之前被调用。我遇到了这个问题，非常感谢任何帮助或建议!

谢谢

Answer 1

It's like the directive is called before the http success is finished.

我确信这正是正在发生的事情。在对 /Instrument/getInstrumentsName 发出请求后，在响应之前，指令代码将运行。当链接函数运行时，scope[attrs.uiItems] 将为 undefined。在执行 autocomplete 调用之前，您需要等到数据返回。

这可以通过 $watch 来完成。像这样:

app.directive('autoComplete', [function($timeout) {
    return    {
        restrict: "A",
        link : function(scope, element, attrs) {
            scope.$watch(attrs.uiItems, function(uiItems) {
                if (uiItems) {
                    element.autocomplete({
                        source: scope[attrs.uiItems],
                        select: function() {
                            $timeout(function() {
                              element.trigger('input');
                            }, 200);
                        }
                    });
                }
            });
        }
    };
}]);

您可能只希望它运行一次，因此您可以将 var 设置为等于 $watch 调用，它返回一个注销函数。在最后调用该函数，它将不再运行 $watch。

var unwatch = scope.$watch(attrs.uiItems, function(uiItems) {
   if (uiItems) {
       //everything you want to do with the data
       unwatch();
   }
});