ng-src无法正常运作,但src运作良好

尼丁·沙玛(Nitin Sharma)

我正在尝试将图像添加到示例网页。但是,每当我在img标签中使用ng-src时,图像就不会显示在页面上(如果我使用“ src”代替“ ng-src”,则该图像可见)。这是我的HTML和JavaScript文件。

Javascript和HTML:

/**
*  Module
*
* Description
*/
angular.module('myModule', [])
    .controller('myCtrl', ['$scope', function($scope){
        $scope.clicked = "";
        $scope.clickMe = function() {
            $scope.clicked= "Image Clicked";    
        };
    }]);
<html ng-app="mainModule">
<head>
    <title>Testing For Image Click</title>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="angular.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body class="container" ng-controller="myCtrl">
    <div>
        <img ng-src="bluegem.jpg" ng-click="clickMe()"/>
    </div>
</body>

提前致谢。

耻辱

此代码中存在2-3个问题
1. myModule和mainModule(您的app.js正在创建一个名为myModule的模块,但是在您的html中您正在使用mainModule)
2.提到的文件的顺序(应在app之前提及Angular.js)。 js在这里我要添加代码

<html ng-app="myModule">
<head>
    <title>Testing For Image Click</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>

    Latest compiled and minified JavaScript
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->


</head>
<body class="container" ng-controller="myCtrl">
    <div>
        <img ng-src="{{image}}" ng-click="clickMe()"/>
    </div>
</body>

angular.module('myModule', [])
    .controller('myCtrl', ['$scope', function($scope){
        $scope.clicked="";
        $scope.image = "bluegem.jpg"
        $scope.clickMe=function()
        {

            $scope.clicked="Image Clicked"; 
        };
    }]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章