Question

我对改进我的计划有疑问。目前我正在开发AngularJS应用程序。应用程序从数据库中读取配置。根据配置是否在服务器上启动并运行我想显示一些彩色的buttonimage，指示配置所处的状态。这就是我的htmlpage的样子：

    <ul id="configContainer">
        <li ng-repeat="config in configs | filter : searchTerm"><span
            ng-click="go('/keypoints/', config.id)">{{config.name}}</span> <span
            class="right"> 

            <img title="state" alt="state" id="stateImage"
                src={{config.stateImage}} class="iconstate" role="button"></span></li>
    </ul>

这就是我的角度控制器的样子：

            // set-up
            $scope.configs = [];

            getConfigurations();
            // functions
            function getConfigurations() {
                SomeService.getConfigurations().then(function(data) {
                    $scope.configs = data;
                    getStates();
                }, function(errorMessage) {
                    console.log("Error: " + errorMessage);
                });
            };

            function getStates() {
                for (i=0; i < $scope.configs.length; i++) {
                    setStateIcon(i);
                }
            }

            function setStateIcon(configi) {
                SomeService.getState($scope.configs[configi].id).then(function(data) {
                    if (data.name == "Started") {
                        $scope.configs[configi].stateImage = "images/ic_greenb.png";
                    }
                    else if (data.name == "Stopped") {
                        $scope.configs[configi].stateImage = "images/ic_redb.png";
                    }
                    else if (data.name == "Starting") {
                        $scope.configs[configi].stateImage = "images/ic_yellowb.png";
                    }

                });
            };

执行我的代码使一切正常，图像显示等，但检查浏览器中的元素仍然会引发以下错误：％7B％7Bconfig.stateImage％7D％7D 404（未找到）。这是为什么？有没有更好的方法来实现我想做的事情？

Answer 1

当目标是角度表达式src时，您应该始终使用ng-src而不是{{ }}。

使用src=时，浏览器尝试在角度有时间替换表达式之前从服务器获取对象。这导致服务器调用{{config.stateImage}}，这显然不是有效的URL。 ng-src=仅在处理完表达式后才会呈现正常的src=网址。

Angular应用程序中src项的404错误

1 个答案: