Question

我想使用ngIf指令并在没有作用域隔离的情况下制作我的自定义myOwnIf指令。正如您在此处的代码中所看到的 - 如果没有范围隔离，它对我没有用。

有人可以帮助理解问题和解决方案吗？

＆＃13;

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

＆＃13;

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

＆＃13;

如何在没有作用域隔离的情况下制作自定义ngIf指令

0 个答案: