个人中心
gpt4 book ai didi

javascript - 与指令 'undefined' 一起使用的 ng-intro 表达式 'ngIntroOptions' 是不可分配的

转载 作者：行者123 更新时间：2023-11-27 23:23:43 25 4
gpt4 key购买 nike

我正在尝试设置angular-intro

到目前为止，我已经完成了以下操作:

HTML:

        <div class="hbox hbox-auto-xs hbox-auto-sm" ng-controller="ClientDashboardController">

        <div class="row" ng-intro-options="IntroOptions" ng-intro-autostart="true">
            <div class="col-lg-5 col-md-12" id="step1">
            </div>
        </div>
    </div>

在我的 ClientDashboardController 中，我有以下内容:

    $scope.IntroOptions = {
    steps:[
        {
            element: '#step1',
            intro: 'More features, more fun.',
            position: 'left'
        },
        {
            element: '#step2',
            intro: "Another step.",
            position: 'bottom'
        },
    ],
    showStepNumbers: false,
    exitOnOverlayClick: true,
    exitOnEsc:true,
    nextLabel: '<strong>NEXT!</strong>',
    prevLabel: '<span style="color:green">Previous</span>',
    skipLabel: 'Exit',
    doneLabel: 'Thanks'
};

但是在我的浏览器中我收到以下两个错误:

    Error: [$compile:nonassign] Expression 'undefined' used with directive 'ngIntroOptions' is non-assignable!
http://errors.angularjs.org/1.3.14/$compile/nonassign?p0=undefined&p1=ngIntroOptions
    at angular.js:63
    at parentSet (angular.js:7661)
    at parentValueWatch (angular.js:7674)
    at Object.regularInterceptedExpression (angular.js:12852)
    at Scope.$digest (angular.js:14235)
    at angular.js:14440
    at completeOutstandingRequest (angular.js:4905)
    at angular.js:5285

还有:

TypeError: c.ngIntroMethod is not a function
at ng-intro.js:2
at angular.js:16223
at completeOutstandingRequest (angular.js:4905)
at angular.js:5285

谁能告诉我我做错了什么？ :S

最佳答案

下面是来自ngIntro的工作示例文档。检查一下你的项目是否有问题。

var app = angular.module('myApp', ['angular-intro']);

app.controller('MyController', function ($scope) {

    $scope.CompletedEvent = function (scope) {
        console.log("Completed Event called");
    };

    $scope.ExitEvent = function (scope) {
        console.log("Exit Event called");
    };

    $scope.ChangeEvent = function (targetElement, scope) {
        console.log("Change Event called");
        console.log(targetElement);  //The target element
        console.log(this);  //The IntroJS object
    };

    $scope.BeforeChangeEvent = function (targetElement, scope) {
        console.log("Before Change Event called");
        console.log(targetElement);
    };

    $scope.AfterChangeEvent = function (targetElement, scope) {
        console.log("After Change Event called");
        console.log(targetElement);
    };

    $scope.IntroOptions = {
        steps:[
        {
            element: document.querySelector('#step1'),
            intro: "This is the first tooltip."
        },
        {
            element: document.querySelectorAll('#step2')[0],
            intro: "<strong>You</strong> can also <em>include</em> HTML",
            position: 'right'
        },
        {
            element: '#step3',
            intro: 'More features, more fun.',
            position: 'left'
        },
        {
            element: '#step4',
            intro: "Another step.",
            position: 'bottom'
        },
        {
            element: '#step5',
            intro: 'Get it, use it.'
        }
        ],
        showStepNumbers: false,
        exitOnOverlayClick: true,
        exitOnEsc:true,
        nextLabel: '<strong>NEXT!</strong>',
        prevLabel: '<span style="color:green">Previous</span>',
        skipLabel: 'Exit',
        doneLabel: 'Thanks'
    };

    $scope.ShouldAutoStart = true;

});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://rawgit.com/usablica/intro.js/master/minified/introjs.min.css" />
  <script type="text/javascript" src="//rawgit.com/usablica/intro.js/master/minified/intro.min.js"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="//rawgit.com/mendhak/angular-intro.js/master/build/angular-intro.min.js"></script>
  <script type="text/javascript" src="app.js"></script>

  <script src="app.js"></script>
</head>

<body ng-controller="MyController">
  <div class="container-narrow">

<div ng-intro-options="IntroOptions" ng-intro-method="CallMe" ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent" ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent" ng-intro-onafterchange="AfterChangeEvent" ng-intro-autostart="ShouldAutoStart">

  <div class="masthead">
    <ul id="step5" class="nav nav-pills pull-right">
      <li><a href="https://github.com/mendhak/angular-intro.js/tree/master/build"><i class='icon-black icon-download-alt'></i> Download</a></li>
      <li><a href="https://github.com/mendhak/angular-intro.js">Github</a></li>
    </ul>
    <h3 class="muted">ng-intro</h3>
  </div>

  <div class="jumbotron">
    <h1 id="step1">Angular Intro.js</h1>
    <p id="step4" class="lead">AngularJS directives for <a href="http://usablica.github.io/intro.js/" onclick="window.open(this.href);return false;">intro.js</a></p>
    <a class="btn btn-large btn-success" ng-click="CallMe();">Demo</a>
    <a class="btn btn-large btn-success" ng-click="CallMe(3);">Start at step 3</a>
  </div>

  <div class="row-fluid marketing">
    <div id="step2" class="span6">
      <h4>Setup</h4>
      <p>Include the JS and CSS files for intro.js, and angular-intro.min.js. Add the module <code>angular-intro</code> to your app declaration.</p>

      <h4>Options</h4>
      <p>Set the options like so: <code>ng-intro-options="IntroOptions"</code>. Define <code>$scope.IntroOptions</code> in your controller. The format is exactly the same as the <a href="https://github.com/usablica/intro.js#options">original</a>.</p>

      <h4>Method name</h4>
      <p>Pick a method name, <code>ng-intro-method="CallMe"</code>. You can invoke the intro from elsewhere by calling <code>CallMe();</code>. You can also specify a step number using <code>CallMe(3);</code>. To autostart, use <code>ng-intro-autostart="true"</code></p>

      <h4>Callbacks</h4>
      <p>You can get callbacks to your controller using the <code>ng-intro-oncomplete</code>, <code>ng-intro-onexit</code>, <code>ng-intro-onchange</code>, <code>ng-intro-onbeforechange</code> and <code>ng-intro-onafterchange</code> directives.</p>

      <p>See <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/index.html">index.html</a> and <a href="https://github.com/mendhak/angular-intro.js/blob/master/example/app.js">app.js</a> for usage code.</p>
    </div>

    <div id="step3" class="span6">
      <h4><a href="https://github.com/mendhak/angular-intro.js/tree/master/example">Example</a></h4>
      <p>Set the options and method name:
      </p>
      <p>Options in the controller</p>
      <p>Call it either way</p>
    </div>
  </div>

  <hr>

</div>
  </div>


</body>

</html>

关于javascript - 与指令 'undefined' 一起使用的 ng-intro 表达式 'ngIntroOptions' 是不可分配的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35157102/

25 4 0
文章推荐： javascript - 打印时在 Chrome 中隐藏垂直滚动条
文章推荐： C++ 转换指针 vector
文章推荐： c++ - 更改数组的最后 5 个字符
文章推荐： C++ 类 - 我的程序有什么问题？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com