功能的隔离范围不起作用答案

【问题标题】：Isolate scope for functions does not work功能的隔离范围不起作用
【发布时间】：2017-01-24 13:11:15
【问题描述】：

我有一个标签视图的指令。当我尝试隔离范围时它不起作用。为什么会这样？

目前范围部分已被注释掉并且工作正常。

当我隔离作用域时，它不会调用函数 loadTab()

myApp.directive("tabsPanel", () => {
    return {
        restrict: "E",
        replace: true,
        // scope: {
        //     tabs: "=tabs",
        //     activeTab: "=",
        //     loadTab: "&"
        // },
        transclude: true,
        link: (scope, element, attrs) => {
            console.log(scope);
        },
        templateUrl: "views/tabs-panel.html"
    }
});

当我隔离范围时它在 console.log 中显示的内容：

activeTab: undefined
loadTab: (locals)
tabs: Array[4]

activeTab 可以是未定义的，这是正常的

模板网址：

<div class="tabs-panel">
    <div class="tab-wrapper">
        <ul class="tabs-nav">
            <li ng-repeat="tab in tabs">
                <a href class="tablinks" ng-bind="::tab.name" ng-click="loadTab({currentTab: tab})" ng-class="{'selected-tab' : activeTab === tab}"></a>
            </li>
        </ul>
        <match-history-tab ng-show="activeTab.url === 'history'"></match-history-tab>
        <odd-movements-tab ng-show="activeTab.url === 'odds'"></odd-movements-tab>
        <injuries-and-suspensions-tab ng-show="activeTab.url === 'injury'"></injuries-and-suspensions-tab>
        <week-stats-tab ng-show="activeTab.url === 'general'"></week-stats-tab>
    </div>
</div>

使用 tabs-panel 的 HTML：

<div class="main-panel">
    <tabs-panel tabs="tabs"></tabs-panel>
</div>

被调用函数：

$scope.loadTab = (selectedTab) => {
    if(selectedTab) {
        activeTab = selectedTab.currentTab;
    } else {
        $scope.activeTab = $scope.tabs[0];
    }
};

【问题讨论】：

第一个if语句中应该是$scope.activeTab吗？
而使用tabsPanel的HTML？
@zeroflagL 现已添加
@rrd 不，它正在检查 selectedTab 是否未定义。如果未定义，它将只加载第一个选项卡。
HTML 需要一个load-tab 属性，否则loadTab: "&" 没有意义。

标签： javascript angularjs

【解决方案1】：

看下面的示例 sn-p ，如何从隔离范围调用函数。您没有将函数分配给孤立的范围变量（加载选项卡）

喜欢这个

 <tabs-panel load-tab="loadTab(data)"></tabs-panel>

var app = angular.module("myapp",[]);

app.directive("tabsPanel", () => {
    return {
        restrict: "E",
        replace: true,
         scope: {
             tabs: "=tabs",
             activeTab: "=",
             loadTab: "&"
         },
        transclude: true,
        link: (scope, element, attrs) => {
           
        },
        template: "<h2 ng-click='loadTab({data:\"world\"})'>click here</h2>"
    }
});

app.controller('todoCtrl',function($scope){

  $scope.loadTab = function(data){
   alert("hello " +data);
  };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp">
   
  <div ng-controller="todoCtrl">
    <tabs-panel load-tab="loadTab(data)"></tabs-panel>
   </div>
 </div>

【讨论】：