Angularjs and SemanticUI issue

Question

I'm working in a project and we are using Angularjs and semantic-ui but when a modal popup semantic-ui don't let me show information from Angular.

example: https://jsfiddle.net/rhm3fkn4/5/

<div ng-app='app' ng-controller='controller'>
  <button class='ui button blue' ng-click="hello()"><i class="write icon"></i>Test</button>
</div>

<div class="ui test modal" >
    <i class="close icon"></i>
    <div class="header">TEST</div>
    <div class="content">
        {{testing}}
    </div>
    <div class="actions">
        <div class="ui black button">
            Cancel
        </div>
        <div class="ui positive right labeled icon button">
            Save
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

var app = angular.module('app', []);
app.controller('controller', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
  $scope.hello = function() {
    $scope.testing="It's working";
    $('.ui.modal').modal('show');
  }
}]);

Naren Murali · Accepted Answer · 2017-08-23 19:48:21Z

1

You need to place the modal inside the controller div. like so.

Demo: here

Code:

<div ng-app='app' ng-controller='controller'>
  <button class='ui button blue' ng-click="hello()"><i class="write icon"></i>Test</button>

  <div class="ui test modal" >
    <i class="close icon"></i>
    <div class="header">TEST</div>
    <div class="content">
        {{testing}}
    </div>
    <div class="actions">
        <div class="ui black button">
            Cancel
        </div>
        <div class="ui positive right labeled icon button">
            Save
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>


</div>

answered Aug 23, 2017 at 19:48

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs and SemanticUI issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related