Как сделать пользовательскую директиву ngIf без изоляции области видимости

Я хочу использовать директиву ngIf и сделать свой кастом myOwnIf директива без выделения области. Как вы можете видеть в коде здесь - он не работает для меня без выделения области видимости.

Может ли кто-то помочь в понимании проблемы и решения?

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

var MyOwnIf = (function () {
    /* @ngInject */
    function MyOwnIf($element) {
        this.isDisplay = $element.attr('my-own-if') === 'true';
    }
    return MyOwnIf;
}());

app.directive('myOwnIf', function () { return ({
    template: "<div ng-if=\"$ctrl.isDisplay\"><ng-transclude></ng-transclude></div>",
    transclude: true,
    controller: MyOwnIf,
    controllerAs: '$ctrl',
    //scope: {}, --> If I will uncomment this it will work, but I don't want to isolate the scope
    bindToController: true,
    restrict: 'A'
}); });
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div my-own-if="false">This text should NOT show because value is FALSE</div>
    <div my-own-if="true">This text should show because I value is TRUE</div>
  </body>

</html>

Источник

0 ответов

Другие вопросы по тегам