AngularJS:ng-click指令的子元素不工作

3okqufwl  于 2023-08-02  发布在  Angular
关注(0)|答案(2)|浏览(120)

我设置了plunker来演示这个问题。单击Bob按钮不起作用。我所期望的是,指令元素的子元素将具有相同的隔离作用域。是否必须将子元素移到指令的template属性中?

gcuhipw9

gcuhipw91#

我会定义一个对象pass。使用方法setDirectiveTitle和标题设置pass
演示**Plunker**

JS

angular.module("myApp", [])
  .directive("myScopedDirective", function() {
    return {
      scope: {
        pass: '=',
        prefix: "@msdTitle"
      },
      link: function($scope, $element, $attributes) {
        
        $scope.pass.setDirectiveTitle = function(title) {
         $scope.pass.title = $scope.prefix + 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>

1aaf6o9v

1aaf6o9v2#

问题是,没有编译,你必须使用transclusion才能在指令中编译html。http://plnkr.co/edit/hGKeTqqU62Na0MWPvBIZ?p=preview
或者你可以简单地传递一个模板:http://plnkr.co/edit/ZYhTdlwSDp0L3jjErOQt?p=preview
但是在这种情况下不能使用范围属性绑定。因为在第二次更新父作用域时,第三次单击子作用域将不会如您预期的那样更新。你必须以不同的方式传播数据。

相关问题