ng-intro 表达式 'undefined' 与指令 'ngIntroOptions'

ng-intro Expression 'undefined' used with directive 'ngIntroOptions' is non-assignable

本文关键字：指令 ngIntroOptions undefined ng-intro 表达式更新时间：2023-09-26

我正在尝试设置角度介绍

到目前为止，我已经做了以下工作：

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

在我的客户端仪表板控制器中，我有以下内容：

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