按钮单击上的隔离作用域不起作用

Isolated scope on button click not working

本文关键字：作用域 不起作用 隔离 单击 按钮      更新时间：2023-09-26

我是angularjs新手。在处理angularjs中的指令时，我遵循了angularjs指令书中的例子。从那以后，我尝试了一些样本，但我被困在一个例子类似的东西，我需要在我的应用程序中实现。

代码是:

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>    
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-app="directiveapp">
    <!--  Two way binding -->
    <div ng-init="title = 'Hello World'; subtitle = 'I am an app'">
       <h2 id="appTitle">{{title}}</h2>
       <h3 id="appSub">{{subtitle}}</h3>
       <button id="newAppTitle" ng-click="setAppTitle('App 2.0')">Upgrade me!</button>
        <div my-scoped-directive msd-title="I'm a directive, within the app{{title}}" msd-subtitle="subtitle">
          <h4 id="directiveTitle">{{title}}</h4>
          <button id="newDirTitle" ng-click="setDirectiveTitle('bob')">Bobit!</button>
          <button id="newDirSub" ng-click="setDirectiveSubtitle('Time to submerge')">Empty the ballasts!</button>
        </div>
    </div>
</div> <!-- End of directiveApp -->
  </body>
</html>

script.js 

var app = angular.module('directiveapp', []);
app.directive('myScopedDirective', function() {
  return {
      restrict: 'EA',
      scope : {
        'title' : '@msdTitle',
        'subtitle' : '=msdSubtitle'
      },
    link : function ($scope, $element, $attrs) {
    console.log($scope)
    $scope.setDirectiveTitle = function (title) {
       $scope.title = title;
    };
    $scope.setDirectiveSubtitle = function (subtitle) {
        $scope.subtitle = subtitle;
    };
  }
 };
});

问题是，当我点击按钮没有点击事件是触发。文本不会被更改。点击Bobit按钮，文本应该从Hello world改为I'm a指令，在应用内设置Hello World

这里我附加活塞链接:http://plnkr.co/edit/NdnWDqr9XCph6uNvJwlc?p=preview

这不是正确的方法，因为应用于元素的指令被编译为指令，但在该元素中没有指令的范围，它包含了控制器的范围。 app.js 

  var app = angular.module('directiveapp', []);
    app.directive('myScopedDirective', function() {
      return {
          restrict: 'EA',
          scope : {
            'title' : '@msdTitle',
            'subtitle' : '=msdSubtitle'
          },
          templateUrl:'main.html',
        link : function ($scope, $element, $attrs) {
        console.log($scope)
        $scope.setDirectiveTitle = function (title) {
           $scope.title = title;
        };
        $scope.setDirectiveSubtitle = function (subtitle) {
            $scope.subtitle = subtitle;
        };
      }
     };
    });

查看更新的plunkr链接

使用ng-click调用控制器中的函数。

把这个:

$scope.setDirectiveTitle = function (title) {
   $scope.title = title;
};
$scope.setDirectiveSubtitle = function (subtitle) {
    $scope.subtitle = subtitle;
};
或者修改你的指令，让它有自己的控制器

app.directive('myScopedDirective', function() {
  return {
    restrict: 'EA',
    scope : {
      'title' : '@msdTitle',
      'subtitle' : '=msdSubtitle'
    },
    template: '<h4 id="directiveTitle">{{title}}</h4>' +
      '<button id="newDirTitle" ng-click="setDirectiveTitle(''bob'')">Bobit!</button>'+
      '<button id="newDirSub" ng-click="setDirectiveSubtitle(''Time to submerge'')">Empty the ballasts!</button>',
    controller: function($scope){
      $scope.setDirectiveTitle = function (title) {
        $scope.title = title;
      };
      $scope.setDirectiveSubtitle = function (subtitle) {
        $scope.subtitle = subtitle;
      };
    }
  };
});
相关文章：