CODEWITHSUNDEEP
jqueryangularjssemantic-ui
Mario
Mario

Reputation: 13

Angularjs and SemanticUI issue

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');
  }
}]);

Upvotes: 1

Views: 85

Answers (1)

Naren Murali
Naren Murali

Reputation: 57766

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>

Upvotes: 1

Related Questions