javascript - 如何在angularjs中调用部分 View 中所需的另一个javascript？-6ren

javascript - 如何在angularjs中调用部分 View 中所需的另一个javascript？

转载作者：行者123 更新时间：2023-11-28 07:30:46

这是部分 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>

在输入框中输入一些内容:

提交

这是主索引页

<!DOCTYPE html>

<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>

这是app.js代码

    // create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'partials/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'partials/about.html',
            controller  : 'aboutController'
        })
        // route for the tutorial page
        .when('/tutorial', {
            templateUrl : 'partials/tutorial.html',
            controller  : 'tutorialController'
        })

        .when('/demoWriter', {
            templateUrl : 'demoWriter.html',
            controller  : 'demoWriterController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'partials/contact.html',
            controller  : 'contactController'
        });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

scotchApp.controller('tutorialController', function($scope) {
    $scope.instruction = 'This is the tutorial page.';


      // Load the Google Transliterate API


});

scotchApp.controller('demoWriterController', function($scope) {
    $scope.instruction = 'This is the tutorial page.';



});

问题是，即使在预期的 ng-view 部分中部分查看了预期的 View ，即使在加载之后我也想调用一些 javascript 代码。我想知道如何在项目中包含这些 javascript 代码。以及如何调用 javascript 以便它完成预期的任务。我想将教程部分 View 中键入的文本转换为僧伽罗语。为此，这里是预期的 javascript 代码...

<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>

除此之外，我还必须包含此脚本

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

任何人都可以解释一下我应该在哪里以及如何加载预期的 javascript 代码，该代码必须位于 app.js 中的tutorialController 调用的部分 View 中。请解释一下如何完成此任务。

最佳答案

使用 ng-init 在目标元素上调用函数。假设需要将文本区域添加到音译范围。

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

其中 addTrnsEngine() 是将元素添加到 google transliterate api 的函数。

您可以发送一个唯一的 ID(如上例所示)或 tagName，然后通过相应的 id 或 tagName 搜索文档。 ( addTrnsEngine('tweet') )

示例:

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

关于javascript - 如何在angularjs中调用部分 View 中所需的另一个javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29143908/

文章推荐： c++ - 查找节点崩溃的函数

文章推荐： ios - GPUImage ChromaKeyBlendFilter

文章推荐： ios - 如何将在 map 上重叠的 MGLAnnotations 组合在一起？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 如何在angularjs中调用部分 View 中所需的另一个javascript？