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

Question

当$scope.instrumentNames 像提供的代码一样在控制器内部设置时它可以工作

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

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

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

控制器

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

就像在http成功完成之前调用指令一样。

我确信这正是正在发生的事情。在发出对/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);
                        }
                    });
                }
            });
        }
    };
}]);

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

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