带有ng-template的Angular指令

Question

今天我正在尝试开发一个popover指令。 我不知道为什么样式选择指令中的ng-repeat在点击不起作用后在popover中被插入（＆lt; - 编辑它现在可以工作）...而且我想要在我的控制器“MyController”中获取“selectedStyles”的值，而不通过指令。

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

app.controller('MyController', ['$scope', function($scope) {
  $scope.selectedStyles = [];
  $scope.$watch('selectedStyles', function(newValue, oldValue) {
    console.log(newValue);
  });
}]);

app.directive('popover', ['$compile', '$templateCache', function($compile, $templateCache) {
        return {
            restrict: 'A',
            scope: {
                header: '@header',
                template: '=template'
            },
            link: function(scope, element) {
                element[0].onclick = function (event) {
                    var popover = document.createElement('div'),
                        header = document.createElement('h4'),
                        content = document.createElement('p');
                    
                    header.textContent = scope.header;
                    content.innerHTML = $templateCache.get(scope.template);
                    
                    popover.appendChild(header);
                    popover.appendChild(content);
                    
                    document.body.appendChild($compile(popover)(scope)[0]);

                    scope.$apply();
                }
            }
        };
    }]);

app.directive('stylesSelect', ['$compile', '$filter', function($compile, $filter) {
    return {
            restrict: 'E',
            scope: {
                selectedStyles: '=selectedStyles'
            },
            template: '<div ng-repeat="s in styles"><label><input type="checkbox" ng-model="s.selected" ng-change="selectStyle()" /> {{s.label}}</label></div>',
            link: function(scope, element) {
              scope.styles = [
                {label: 'Hipster', selected: false},
                {label: 'Hip-Hop', selected: false},
                {label: 'Punk', selected: false}
              ];
              scope.selectStyle = function() {
                scope.selectedStyles = $filter('filter')(scope.styles, {selected: true});
            };
            }
      }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MyController">
{{test}}
        <button popover template="'popoverContent.html'" header="Select your styles" type="button">Show Popover</button>

        <script type="text/ng-template" id="popoverContent.html">
            <styles-select selected-styles="selectedStyles"></styles-select>
        </script>
    </div>
</div>

它会让我发疯...请帮助大声笑

谢谢

Answer 1

尝试使用具有承诺的服务，而不是更改不同范围中的值。这样，popover服务在您的应用程序中更具可重用性。

＆＃13;

＆＃13;

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

app.controller('MyController', ['$scope', 'popover',
  function($scope, popover) {

    $scope.selectedStyles = [];

    $scope.showStylesSelect = function() {

      popover.show({
        templateUrl: 'popoverContent.html',
        scope: {
          header: 'Select your style',
          styles: [{
            label: 'Hipster',
            selected: false
          }, {
            label: 'Hip-Hop',
            selected: false
          }, {
            label: 'Punk',
            selected: false
          }]
        }
      }).then(function(result) {
        $scope.selectedStyles = result.selectedStyles;
      });

    };

    $scope.$watch('selectedStyles', function(newValue, oldValue) {
      console.log(newValue);
    });
  }
]);

app.factory('popover', ['$rootScope', '$q', '$compile', '$templateCache',
  function($rootScope, $q, $compile, $templateCache) {

    function showPopover(options) {
      var defer = $q.defer(),
        scope = $rootScope.$new(),
        popover = document.createElement('div'),
        header = document.createElement('h4'),
        content = document.createElement('p');

      angular.extend(scope, options.scope || {});

      scope.close = function() {
        popover.parentNode.removeChild(popover);
        defer.resolve(scope);
      };

      header.textContent = options.header || '';
      content.innerHTML = $templateCache.get(options.templateUrl);

      popover.appendChild(header);
      popover.appendChild(content);

      document.body.appendChild($compile(popover)(scope)[0]);

      return defer.promise;
    }

    return {
      show: showPopover
    }

  }
]);


app.directive('stylesSelect', ['$filter',
  function($filter) {
    return {
      restrict: 'E',
      scope: false,
      template: '<div ng-repeat="s in styles"><label><input type="checkbox" ng-model="s.selected" ng-change="selectStyle()" /> {{s.label}}</label></div><button ng-click="close()">close</button>',
      link: function(scope) {
        scope.selectStyle = function() {
          scope.selectedStyles = $filter('filter')(scope.styles, {
            selected: true
          });
        };
      }
    }
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app="MyApp" class="ng-scope">
  <script type="text/ng-template" id="popoverContent.html">
    <styles-select selected-styles="selectedStyles"></styles-select>
  </script>
  <div ng-controller="MyController" class="ng-scope ng-binding">
    <button ng-click="showStylesSelect()">Show Popover</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;