Question

我已设置plunker来证明此问题。单击Bob按钮不起作用。我所期望的是，指令元素的子元素将具有相同的孤立范围。我是否必须将子元素移动到指令的模板属性中？

Answer 1

我会定义一些对象pass。使用方法pass和标题：

设置setDirectiveTitle

演示 Plunker

<强> JS

angular.module("myApp", [])
  .directive("myScopedDirective", function() {
    return {
      scope: {
        pass: '=',
        preffix: "@msdTitle"
      },
      link: function($scope, $element, $attributes) {

        $scope.pass.setDirectiveTitle = function(title) {
         $scope.pass.title = $scope.preffix + title;
        } 
      }
    };
  })
  .controller("AppController", ["$scope", function($scope) {

    $scope.passVal = {};

    $scope.setAppTitle = function(title) {
      $scope.passVal.title = title;
    };
  }]);

<强> HTML

<div ng-controller="AppController">
      <h2>{{title}}</h2>
      <button ng-click="setAppTitle('App 2.0')">Upgrade Me!</button>
      <div my-scoped-directive pass="passVal" msd-title="I'm a directive inside the app: {{passVal.title}}">
        <h2>{{passVal.title}}</h2>
        <button ng-click="passVal.setDirectiveTitle('Bob')"  >Bob It!</button>
      </div>
    </div>

Answer 2

问题是没有编译，你必须使用transclusion才能在指令内编译html。 http://plnkr.co/edit/hGKeTqqU62Na0MWPvBIZ?p=preview

或者你可以简单地传递一个模板： http://plnkr.co/edit/ZYhTdlwSDp0L3jjErOQt?p=preview

但是在这种情况下你不能使用范围属性绑定。因为在父作用域的第二次更新时，第三次单击子项将不会按预期更新。您必须以不同方式传播数据。

AngularJS：ng-click指令的子元素不起作用

2 个答案: