0

The {{name}} outside the jquery-steps div can be updated, but not the {{name}} inside. Why and how to fixed this? Please see my code or jsfiddle.

HTML 

<div ng-controller="MyCtrl">
  Hello, {{name}}!

  <div id="example-basic">
    <h3>Keyboard</h3>
    <section>
        <p>I'm {{name}}</p>
    </section>
    <h3>Effects</h3>
    <section>
        <p>I'm {{name}}</p>
    </section>
</div>  
</div>

JavaScript

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


function MyCtrl($scope) {
    $scope.name = 'Superhero';


    $("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
    onStepChanging: function(e, currentIndex, newIndex){
    setTimeout(function(){ // Time out included, otherwise throw error.
     $scope.$apply(function(){
     $scope.name = 'NEWNAME!'
     console.log($scope.name)// both console and {{name}} outside the #example-basic is updated, but not inside. PROBLEM!
    },10)

    })

    return true;
    }
});
WCMC
  • 1,602
  • 3
  • 20
  • 32
  • Plugins should be initialized in a directive or component...never in a controller – charlietfl Jul 14 '17 at 15:06
  • Also you need to register that controller. Current versions of angular don't allow global functions as controllers – charlietfl Jul 14 '17 at 15:07
  • @charlietfl GOSH, how can a self-study newbie know this..... Can you tell me know to use `.directives` to achieve this? – WCMC Jul 14 '17 at 15:08
  • should be easy search something like `angular jquery plugin directive` – charlietfl Jul 14 '17 at 15:10
  • @charlietfl Thanks. What do you mean by "register controller"? Do you mean `myApp.controller('myCtrl',function($scope) { })`? – WCMC Jul 14 '17 at 15:12
  • yes ...exactly...or pass in a function reference `myApp.controller('myCtrl',MyCtrl)` – charlietfl Jul 14 '17 at 15:14
  • 2
    Please people, stop using Angular AND jQuery. Use one or the other. Do things the angular way (DOM generation) OR the jQuery way (DOM manipulation) but not both. You're just mixing up two different technologies with two very different philosophies, that can only lead to clumsier and heavier code, not to mention that you have to load two libraries instead of one. – Jeremy Thille Jul 14 '17 at 15:15

0 Answers0