search

angularify / angular-semantic-ui

[WiP] AngularJS native directives for Semantic UI
http://angularify.github.io/angular-semantic-ui
MIT License
383 stars 87 forks source link

Error when moving from one angular-ui-state to another #22

Closed dmitry-saritasa closed 9 years ago

dmitry-saritasa commented 9 years ago

TypeError: undefined is not a function at angular-semantic-ui.js:280 at Scope.$get.Scope.$broadcast (angular.js:14785) at Scope.$get.Scope.$destroy (angular.js:14405) at Scope.ng.config.$provide.decorator.$delegate.proto.$destroy (:812:29) at cleanupLastView (angular-ui-router.js:3816) at angular-ui-router.js:3849 at publicLinkFn (angular.js:6995) at updateView (angular-ui-router.js:3839) at angular-ui-router.js:3801 at Scope.$get.Scope.$broadcast (angular.js:14785)

angular-semantic-ui.js:280 is:

 scope.$on('$destroy', function(event) {
                    this.remove_accordion(scope);
                });

my sample form is

<div ui-view>
    <form class="ui form">
        <h3 class="ui dividing header">Personal Information</h3>
        <div class="two fields">
            <div class="field">
                <label>Name</label>
                <div class="two fields">
                    <div class="field">
                        <input type="text" name="first-name" placeholder="First Name">
                    </div>
                    <div class="field">
                        <input type="text" name="last-name" placeholder="Last Name">
                    </div>
                </div>
            </div>
            <div class="field">
                <label>Gender</label>
                <dropdown title="my dropdown" ng-model="dropdown_model">
                    <dropdown-group>item1</dropdown-group>
                    <dropdown-group>item2</dropdown-group>
                    <dropdown-group>item3</dropdown-group>
                    <dropdown-group>item4</dropdown-group>
                </dropdown>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <label>State</label>
                <select class="ui search dropdown" id="state">
                    <option value="">State</option>
                    <option value="AL">Alabama</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">District Of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>
            <div class="field"></div>
        </div>
        <div class="field">
            <label>Biography</label>
            <textarea></textarea>
        </div>
        <h4 class="ui dividing header">Account Info</h4>
        <div class="two fields">
            <div class="required field">
                <label>Username</label>
                <div class="ui icon input">
                    <input type="text" placeholder="Username">
                    <i class="user icon"></i>
                </div>
            </div>
            <div class="required field">
                <label>Password</label>
                <div class="ui icon input">
                    <input type="password">
                    <i class="lock icon"></i>
                </div>
            </div>
        </div>
        <h4 class="ui top attached header">Import Settings</h4>
        <div class="ui bottom attached segment">
            <div class="grouped inline fields">
                <div class="field">
                    <input type="radio" name="sex" value="male" checked><label>Male</label>
                </div>
                <div class="field">
                    <input type="radio" name="sex" value="female"><label>Female</label>
                </div>
            </div>
        </div>
        <h4 class="ui dividing header">Settings</h4>
        <h5 class="ui header">Privacy</h5>
        <div class="field">
            <checkbox checked="false" ng-model="privacy" type="toggle">Allow <b>anyone</b> to see my account</checkbox>
        </div>
        <div class="field">
            <checkbox checked="false" ng-model="privacy2" type="toggle">Allow <b>only friends</b> to see my account</checkbox>
        </div>
        <h5 class="ui header">Newsletter Subscriptions</h5>
        <div class="field">
            <checkbox checked="false" ng-model="aa" type="slider">Top Posts This Week</checkbox>
        </div>
        <div class="field">
            <checkbox checked="false" ng-model="bb" type="slider">Hot deals</checkbox>
        </div>
        <div class="ui hidden divider"></div>
        <div class="field">
            <checkbox checked="false" ng-model="cc" type="standard">I agree to the <a href="#">Terms of Service</a></checkbox>
        </div>
        <div class="ui error message">
            <div class="header">We noticed some issues</div>
        </div>
        <div class="ui submit button">Register</div>

    </form>
</div>

app.js

angular.module('hattApp', [
    'ngAnimate', 'ngResource', 'ui.router',
    'myApp.controllers',
    'myApp.projects',
    'myApp.dashboard',
    'angularify.semantic'
]);

angular.module('hattApp').run(function($state, $rootScope) {
    $state.go('dashboard');

});

**index.html**
```html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <title>Web</title>
    <!-- build:css app/built/app.min.css -->
    <link rel="stylesheet" type="text/css" href="/app/assets/css/app.css" />
    <link rel="stylesheet" type="text/css" href="/bower_components/semantic-ui/dist/semantic.css" />
    <!-- endbuild -->

</head>
<body ng-controller="LayoutController">

    <!--top navigation start-->
    <div class="ui secondary pointing menu">
        <a class="item"
           ng-repeat="category in categories"
           ui-sref="{{category.url}}"
           ng-class="{'active': isCurrentTopLevelCategory(category)}"><i ng-if="category.icon!=null" class="{{category.icon}}"></i>{{category.title}}</a>

        <div class="right menu">
            <div class="item">
                <div class="ui transparent icon input">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
            <a class="ui item">Logout</a>
        </div>
    </div>
    <!--top navigation finish-->

    <div class="ui grid">
        <div class="row">
            <div class="two wide column" ng-show="showSideNav">
                <div ui-view="sidenav"></div>
            </div>
            <div class="ten wide column">
                <div ui-view="content"></div>
            </div>
        </div>
    </div>

    <!-- build:js app/built/app.min.js -->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/underscore/underscore.js"></script>
    <script src="/bower_components/sweetalert/lib/sweet-alert.js"></script>
    <script src="/bower_components/semantic-ui/dist/semantic.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="/bower_components/angular-resource/angular-resource.js"></script>
    <script src="/bower_components/angular-animate/angular-animate.js"></script>
    <script src="/bower_components/angular-semantic-ui/dist/angular-semantic-ui.js"></script>

    <script src="/app/app.js"></script>
    <script src="/app/js/controllers/layout.js"></script>
    <script src="/app/features/projects/projectModule.js"></script>
    <script src="/app/features/dashboard/dashboardModule.js"></script>
    <script src="/app/features/dashboard/js/controllers/dashboard-sidenav-controller.js"></script>
    <script src="/app/features/projects/js/controllers/projects-controller.js"></script>
    <script src="/app/features/projects/js/controllers/projects-sidenav-controller.js"></script>

    <!-- endbuild -->

</body>
</html>

so when I'm opening the page with the form - all is good. When I'm navigating away from the form by clicking any button in top navigation block (which sets a new state in angular ui router) - I'm getting such error.

I have Latest angular.js 1.3.15

{
  "name": "web",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-messages": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "latest",
    "sweetalert": "latest",
    "semantic-ui": "latest",
    "underscore": "latest",
    "angular-semantic-ui": "latest"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "hatt"
}
jspdown commented 9 years ago

Thank you @saritasa for reporting it. This error seems to be pretty old, introduced width 0c107c142eec38fdf704840615d307329e91265c The listener on $destroy was probably copy pasted from the accordion controller. This listener is definitely not used and can be removed. Do you want to fix it?