Javascript 通过打开ControllerAs将$scope替换为此_Javascript_Angularjs

Javascript 通过打开ControllerAs将$scope替换为此

javascript angularjs

Javascript 通过打开ControllerAs将$scope替换为此,javascript,angularjs,Javascript,Angularjs,我想在示例Angular code base中将$scope替换为这个关键字，然后切换到使用ControllerAs语法但反过来，这似乎现在不起作用我在我的控制器中有一个国家列表，在我的自定义指令中每当单击国家名称时，我都会显示相应国家的地图 <body ng-controller="appCtrl as vm"> <nav class="navbar navbar-default"> <div class="container-fluid">

我想在示例Angular code base中将

$scope

替换为

这个

关键字，然后切换到使用

ControllerAs

语法

但反过来，这似乎现在不起作用

我在我的

控制器中有一个国家列表

，在我的

自定义指令中

每当单击国家名称时，我都会显示相应国家的地图

<body ng-controller="appCtrl as vm">

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Welcome to the world of directives!</a>
        </div>
        <ul class="nav navbar-nav">
            <li ng-repeat="countryTab in vm.countries" ng-click="vm.itemClicked(countryTab)" style="cursor:pointer">
                <a>{{countryTab.label}}</a>
            </li>
            <br>
        </ul>
    </div>
</nav>
<data-country-tab-bar country="vm.selectedCountry"  ng-if="vm.selectedCountry">
    <strong><i>Check out our cool new directive!</i></strong>
</data-country-tab-bar>
<script>
    var app = angular.module('app',[]);
    app.controller('appCtrl',function($scope,$http){
        this.countries = [{
          id: 1,
          label: 'Italy',
          coords: '41.29246,12.5736108'
        }, {
          id: 2,
          label: 'Japan',
          coords: '37.4900318,136.4664008'
        }, {
          id: 3,
          label: 'USA',
          coords: '37.6,-95.665'
        }, {
          id: 4,
          label: 'India',
          coords: '20.5937,78.9629'
        }];

        this.itemClicked = function(value){
            this.selectedCountry = value;
        }


    });

但是，我可以看到转置的字符串

查看我们酷的新指令但是我看不到地图
在控制台中没有这样的错误
请帮助。
我认为问题与以下方面有关：
this.itemClicked = function(value){
  this.selectedCountry = value;
}

JavaScript中声明为so的函数中的this.selectedCountry将引用当前函数，而不是您期望的控制器（父函数）
解决方案（ES5）：
解决方案（ES6）：
此外，指令作用域语法似乎不正确：
$scope:{
  country: '='
},

应该是：
scope:{
  country: '='
},

希望这能有所帮助。
我认为问题与以下方面有关：
this.itemClicked = function(value){
  this.selectedCountry = value;
}

JavaScript中声明为so的函数中的this.selectedCountry将引用当前函数，而不是您期望的控制器（父函数）
解决方案（ES5）：
解决方案（ES6）：
此外，指令作用域语法似乎不正确：
$scope:{
  country: '='
},

应该是：
scope:{
  country: '='
},

希望这能有所帮助。
不确定“转置字符串”是什么意思。在我看来，您只是看到了放入指令标记中的字符串，但指令没有激活/处理。它只是一个死HTML。如果是这样的话，我看到这种情况发生是因为指令标记错误地使用了指令名（ab-cd而不是a-b-c-d等），或者指令没有被注入到试图使用它的组件中。因此标记在模板中，模板呈现，但指令什么也不做。没有控制台错误告诉你这是怎么回事，它只是一个有角度的黑洞。{{country.label}
正在打印值？@atulquest93。。不，不是。img
也不会出现。我想这与我如何将vm.selectedCountry
传递给指令的scope对象有关。不确定“转置字符串”是什么意思。在我看来，您只是看到了放入指令标记中的字符串，但指令没有激活/处理。它只是一个死HTML。如果是这样的话，我看到这种情况发生是因为指令标记错误地使用了指令名（ab-cd而不是a-b-c-d等），或者指令没有被注入到试图使用它的组件中。因此标记在模板中，模板呈现，但指令什么也不做。没有控制台错误告诉你这是怎么回事，它只是一个有角度的黑洞。{{country.label}
正在打印值？@atulquest93。。不，不是。img
也不会出现。我想这与我如何将vm.selectedCountry
传递给指令的scope对象有关。感谢您指出错误。但是我仍然看不到
在工作。{{country.label}}
都不起作用。请参见编辑（我认为另一个问题是在指令定义中，$scope
应该是scope
）。感谢您指出错误。但是我仍然看不到
在工作。{{country.label}}
都不起作用。请参见编辑（我认为另一个问题是$scope
应该是指令定义中的scope
）。