Question

我是Angularjs的新手。我在Angularjs尝试了一些代码。但我得到的结果是绑定表达式。

Script.js显示如下。

        /**
        * 
        */

        // <reference path="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js" />

        //Create the module
        var myApp=angular.module("myModule",[]);

        //Create the Controller
        var myController=function($scope){

        $scope.message="Angular Js Tutorial";

        var employee= {

        firstname : "Hiroshi",
        lastname : "Perera" , 
        gender : "Male"

        };

        $scope.employee=employee;

        };


        ////Register model with the controller. Name of the Controller 'MyController'.
        myApp.controller("myController1",myController); 

        //Creating everything in a single line.

        var myApp2=angular
        .module("myModule2",[])
        .controller("myController2",function($scope){

        var father={

        firstname: "Lakshman ",
        lastname : "Perera",
        gender   : "Male"
        };
        $scope.father=father;   

        });


        var myapp3=angular
        .module("ModImage",[])
        .controller("ControllerFlower",function($scope){


        var flowerDetails={


            flowerName: "Roses",
            Colour : "prik",
            flower:"Images/boquet.jpg"
        };

        $scope.flowerDetails=flowerDetails;
        });

以下是html文件。

    <!DOCTYPE html>
    <html>
    head >
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="lib/Script.js"></script>
    </head>
    <body>
    <div data-ng-app="">
        <div>
            10+20={{ 1==2 }}
        </div>
        <div>
            10+20={{ 10+20 }}
        </div>
        <div>
            {{{name:'Hiroshi',age:'28'}.name}}
        </div>
        <div>
            {{ ['Hiro','Thili','Thamali'][1] }}
        </div>

    </div>  
        <div ng-controller="myController1" data-ng-app="myModule">
            <div>{{message}}</div>

            <div>My First Name : {{employee.firstname}}</div>

            <div>My Last Name : {{employee.lastname}}</div>

            <div>My Gender : {{employee.gender}}</div>
        </div>

        <div data-ng-app="myModule2" ng-controller="myController2">


            <div>Father's First Name : {{father.firstname}}</div>

            <div>Father's Last Name : {{father.lastname}}</div>

            <div>Father's Gender : {{father.gender}}</div>

        </div>

        <div data-ng-app="ModImage" ng-controller="ControllerFlower">


            <div>Name : {{flowerDetails.flowerName}}</div>

            <div>Colour : {{flowerDetails.Colour}}</div>

            <div>Image : {{flowerDetails.flower}}</div>

        </div>

    </body>
    </html>

我的结果如下：

    10+20=false
    10+20=30
    Hiroshi
    Thili
    {{message}}
    My First Name : {{employee.firstname}}
    My Last Name : {{employee.lastname}}
    My Gender : {{employee.gender}}
    Father's First Name : {{father.firstname}}
    Father's Last Name : {{father.lastname}}
    Father's Gender : {{father.gender}}
    Name : {{flowerDetails.flowerName}}
    Colour : {{flowerDetails.Colour}}
    Image : {{flowerDetails.flower}}

有人可以让我知道我做过的错误。我在几个方面尝试了这个但是仍然无法获得预期的输出。

Answer 1

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap手动引导它们。 AngularJS应用程序不能互相嵌套。

让AngularJS应用程序的多个实例同时运行在页面中，您必须使用here所述的手动引导程序。

您需要在script.js文件

中添加以下两行

angular.bootstrap(document.getElementById("myModule2"), ['myModule2']);
angular.bootstrap(document.getElementById("ModImage"), ['ModImage']);

请为您的演示检查codepen here。

希望这会对你有所帮助!!

角度输出未按预期显示

1 个答案: