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