Question

我希望能够在我的应用中做到这样的事情：

 @Override
 public void onActivityResult (int requestCode, int resultCode, Intent data) {
    if (resultCode == Activity.RESULT_OK) {
        confirm = data.getParcelableExtra(PaymentActivity.EXTRA_RESULT_CONFIRMATION);
        if (confirm != null) {
            try {
                String confirmation = confirm.toJSONObject().toString(4);
...

<pill-autocomplete> <pill-template>{{item.name}}</pill-template> </pill-autocomplete>有一个模板可以转换成这样的子指令：

pill-autocomplete

在ng-transclude创建范围并且<pills ng-transclude="pillTemplate"></pills> <input type="text">指令具有隔离范围的情况下，似乎不可能。

我想到的一种方法是在自动完成模板功能中注入药丸模板。问题在于它失去了翻译范围。我也必须在每个与药丸有相似行为的指令中这样做。

在角度1.x中还有其他方法可以实现这一点吗？

Answer 1

问题在于，当您将药丸自动完成时的数据转换为药片时，您已经删除了药片内容。

删除操作会替换指令模板下的内容，因此无法加载pill指令模板中的内容，因为已被转换覆盖了。

我的建议很简单，不要直接使用带有ng-transclude的标签，使用内部div使指令可以加载其内容

＆＃13;

angular.module('app', []);
  var app = angular.module('app');

  'use strict';

  var app =  angular.module('app');

  app.controller('testController', [
    function () {
      var vm = this;
      vm.name = 'Jimmy';
    }]);

  app.directive('pillAutocomplete', function () {
    return {
      priority: 100,
      restrict: 'E',
      transclude: true,
      template: '<pills><p>From Pill-Autocomplete</p><div ng-transclude><div></pills>'
    };
  });

  app.directive('pills', function () {
    return {
      restrict: 'E',
      transclude: true,
      link: function (scope, element, attrs) {
        scope.style = true;
      },
      template: '<p>Inside Pills</p><div ng-class="{pillscolor : style}" ng-transclude></div>'
    };
  });

＆＃13;

.pillscolor{
  color: green;
  font-size: 20px;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="app">
<section ng-controller="testController as test">
 Controller scope - {{test.name}}
  <pill-autocomplete>
     From controller - {{test.name}}
  </pill-autocomplete>
</section>
</article>

＆＃13;

Answer 2

这是您可能将数据导入您的孩子DDO的一种方式。如果有任何不清楚的地方，请告诉我，希望这会有所帮助。

'12' + '2' === '122'

function exampleController($scope) {
  $scope.data = [
    'cupidatat',
    'laboris',
    'minim',
    'nisi',
    'anim',
    'id',
    'laboris'
  ];
}

function exampleParentDirective() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    template: '<div class="parent-example"></div>'
      //optionally you could potentially use the child
      //directive in the template of this DDO.
      //template: '<div class="parent-example"><example-directive data="data"></example-directive></div>'
  };
}

function exampleDirective() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    template: '<div class="child-example" ng-repeat="ipsum in data track by $index" ng-bind="ipsum"></div>',
    link: function($scope) {
      //link function not need unless you need other processing done in child directive.
    }
  };
}

angular
  .module('app', [])
  .controller('exampleController', exampleController)
  .directive('exampleParentDirective', exampleParentDirective)
  .directive('exampleDirective', exampleDirective);

Answer 3

这个演示可能有帮助 https://amavis.org/README.postfix.html#d0e1038

的index.html

 <my-tabs>
  <my-pane title="Hello">
    <p>Lorem ipsum dolor sit amet</p>
  </my-pane>
  <my-pane title="World">
    <em>Mauris elementum elementum enim at suscipit.</em>
    <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
  </my-pane>
</my-tabs>

MY-tabs.html

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="select(pane)">{{pane.title}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>

MY-pane.html

<div class="tab-pane" ng-show="selected">
  <h4>{{title}}</h4>
  <div ng-transclude></div>
</div>

当然是script.js

angular.module('docsTabsExample', [])
.directive('myTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: ['$scope', function MyTabsController($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    }],
    templateUrl: 'my-tabs.html'
  };
})
.directive('myPane', function() {
  return {
    require: '^^myTabs',
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

你能在Angular中转换成子指令吗？

3 个答案:

的index.html

MY-tabs.html

MY-pane.html

当然是script.js