如何在angularjs的局部视图中调用另一个javascript？

Question

Here is the code for the partial view? 这是局部视图的代码？

<div class="container">

<div class="row">

    <div class="col-lg-12">
        <h1 class="page-header">Record Incident <small>Please enter important information in the audio...</small></h1>
        <ol class="breadcrumb">
            <li>
                <h1> {{instruction}} </h1>
            </li>

        </ol>
    </div>

</div>

Input something in the input box: 在输入框中输入内容：

Submit 提交

Here is the main index page 这是主要的索引页面

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link href="data:image/gif;" rel="icon" type="image/x-icon" />


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <!-- Angular JS Library import  -->

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

    <!-- SPELLS -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="app.js"></script>




</head>

<!-- define angular controller -->
<body ng-controller="mainController">

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Angular Routing Example</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#"><i class="fa fa-home"></i> Home</a>
                </li>
                <li>
                    <a href="#about"><i class="fa fa-shield"></i> About</a>
                </li>
                <li>
                    <a href="#contact"><i class="fa fa-comment"></i> Contact</a>
                </li>
                <li>
                    <a href="#tutorial"><i class="fa fa-comment"></i> Tutorials</a>
                </li>
                <li>
                    <a href="#demoWriter"><i class="fa fa-comment"></i> Demo Writer</a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view>

        </div>

    </div>

    <footer class="text-center">

    </footer>

</body>

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <link href="data:image/gif;" rel="icon" type="image/x-icon" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <!-- Angular JS Library import --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- SCROLLS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <script src="app.js"></script> </head> <!-- define angular controller --> <body ng-controller="mainController"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">Angular Routing Example</a> </div> <ul class="nav navbar-nav navbar-right"> <li> <a href="#"><i class="fa fa-home"></i> Home</a> </li> <li> <a href="#about"><i class="fa fa-shield"></i> About</a> </li> <li> <a href="#contact"><i class="fa fa-comment"></i> Contact</a> </li> <li> <a href="#tutorial"><i class="fa fa-comment"></i> Tutorials</a> </li> <li> <a href="#demoWriter"><i class="fa fa-comment"></i> Demo Writer</a> </li> </ul> </div> </nav> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> <div ng-view> </div> </div> <footer class="text-center"> </footer> </body>

This is the app.js code 这是app.js代码

<script type="text/javascript">
        // Load the Google Transliterate API
        google.load("elements", "1", {
            packages : "transliteration"
        });

        function onLoad() {
            var options = {
                sourceLanguage : google.elements.transliteration.LanguageCode.ENGLISH,
                destinationLanguage : [google.elements.transliteration.LanguageCode.SINHALESE],
                shortcutKey : 'ctrl+g',
                transliterationEnabled : true
            };

            // Create an instance on TransliterationControl with the required
            // options.
            var control = new google.elements.transliteration.TransliterationControl(options);

            // Enable transliteration in the textbox with id
            // 'transliterateTextarea'.
            control.makeTransliteratable(['transliterateTextarea']);
        }


        google.setOnLoadCallback(onLoad);
    </script>

The problem is that even though the expected view is partially viewed in the expected ng-view section, even after loading I want to call some javascript code. 问题是，即使在预期的ng-view部分中部分查看了预期的视图，即使加载后，我也要调用一些javascript代码。 And I want to know, how to include those javascript code in the project. 我想知道，如何在项目中包含这些javascript代码。 And how to call the javascript so that it will do the expected task. 以及如何调用javascript以使其完成预期的任务。 I want to convert the typed text in the tutorial partial view to sinhala. 我想将教程局部视图中的键入文本转换为sinhala。 For that here is the expected javascript code... 为此，这是预期的javascript代码...

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

In addition to this I have to include this script too 除此之外，我也必须包含此脚本

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

Can anyone please explain me, where and how I should load the expected javascript code that has to be in that partial view which is called by the tutorialController in the app.js. 任何人都可以解释一下我，在什么地方以及如何加载预期的javascript代码，该代码必须位于app.js中的tutorialController调用的局部视图中。 Please explain me how to complete this task. 请向我解释如何完成此任务。

Answer 1

Use and ng-init to call a function on the target element. 使用和ng-init调用目标元素上的函数。 Asuming a textarea needs to be added to transliteration scope. 假设需要将文本区域添加到音译范围。

<textarea
    ng-init="addTrnsEngine()"
    id="tweet"
    class="form-control primaryPostArea"
    ng-model="newPost.text"
    placeholder="Say something...">
</textarea>

where addTrnsEngine() is a function which adds the element to the google transliterate api. 其中addTrnsEngine（）是将元素添加到Google音译api的函数。

you could send a send a unique id like in the example above or the tagName and search the document by the corresponding id or tagName. 您可以发送一个唯一的ID（如上面的示例）或tagName，然后通过相应的ID或tagName搜索文档。 ( addTrnsEngine('tweet') ) （addTrnsEngine（'tweet'））

example: 例：

var addTrnsEngine() = function( targetId ){
    var elem = document.getElementById( targetId );
    //add transliteration on elem here.
}

如何在angularjs的局部视图中调用另一个javascript？

问题描述

1 个解决方案

解决方案1
0 2015-07-06 10:38:02

如何在angularjs的局部视图中调用另一个javascript？

问题描述

1 个解决方案

解决方案1 0 2015-07-06 10:38:02

解决方案1
0 2015-07-06 10:38:02