Question

我在AngularJS中有一个看起来像

的页面

<body ng-controller="mainController">
    <my-view></my-view>
</body>

在my-view文件中，我有一个输入元素：

<div>
    <input id="my-input" type="file"> 
</div>

在我的mainController中，我将文件输入元素分配给$scope变量。在大约50％的页面加载中，$scope变量被赋予空值。我假设这是因为当我的控制器分配变量时，元素实际上没有被加载到DOM上。

我尝试使用

angular.element(document).ready(function(){
    $scope.fileChooser = document.getElementById('my-input');
});

但这似乎无法解决问题，因为my-view HTML文件的请求是异步的，并且是在初始页面加载后进行的。我通过将变量赋值包装在setTimeout()中找到了一个临时解决方案，但我想避免这种情况。

在执行代码执行之前，Angular中是否有内置的方法来等待加载所有视图？

Answer 1

我通过在我的指令中而不是我的控制器中进行变量赋值来解决问题。

myApp.directive('myView', function(){
    return{
        restrict: 'E',
        replace: true,
        scope: '=',
        templateUrl: '/path/to/html.html',
        link: function(){
            // Assign input element to scope variable
            scope.fileChooser = document.getElementById('my-input');
        }
    }
});

Answer 2

试用指令postLink功能。

但您也可以尝试在输入字段中使用ng-model=""，并以该方式而不是按元素定位字段。您还可以使用$watch(...)来设置当此ng模型的值发生更改时触发的观察程序。

AngularJS - 在执行变量赋值之前等待查看HTML加载？

2 个答案: