Angularjs 和 SemanticUI 问题

Question

我在一个项目中工作，我们正在使用 Angularjs 和 semantic-ui 但是当模态弹出 semantic-ui 不让我显示来自Angular.

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

Answer 1

您需要将模态框放入控制器中 div。像这样。

演示： here

代码：

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

Angularjs 和 SemanticUI 问题

Angularjs and SemanticUI issue

jquery

angularjs

semantic-ui