Javascript 从具有隔离作用域的angular指令获取变量_Javascript_Angularjs

Javascript 从具有隔离作用域的angular指令获取变量

javascript angularjs

Javascript 从具有隔离作用域的angular指令获取变量,javascript,angularjs,Javascript,Angularjs,我正在使用angular@1.6.3，bootstrap@3.3.7和jquery@1.12.4 我正在尝试将标记包装到jQuery插件中要做到这一点，我尝试使用具有隔离作用域的自定义指令这是我的HTML： <div ng-app="myApp" ng-controller="MainCtrl as vc"> <select multiple="multiple" multiselect ng-model="vc.selected

我正在使用

angular@1.6.3

，

bootstrap@3.3.7

和

jquery@1.12.4

我正在尝试将

标记包装到jQuery插件中

要做到这一点，我尝试使用具有隔离作用域的自定义指令

这是我的HTML：

<div ng-app="myApp" ng-controller="MainCtrl as vc">
  <select multiple="multiple"
          multiselect
          ng-model="vc.selectedCountries"
          data-options="vc.allCountries"
          data-list-type="Countries">
      <optgroup ng-repeat="(continent, countries) in options" label="{{continent}}">
        <option ng-repeat="country in countries" value="{{country.code}}">
        {{country.code}} - {{country.name}}
        </option>
      </optgroup>
  </multiselect>
</div>

但是，这样就不会填充

。这不是插件本身的问题，因为如果我删除包含

.multiselect（）

调用的行，常规multiselect将显示为空

我认为这与转换和范围有关，因为如果我将

transclude:true，

更改为

transclude:false，

和

<optgroup ng-repeat="(continent, countries) in options" label="{{continent}}">

到

它很好用

但是，我试图概括这个组件，所以我不想依赖于控制器。

您不需要依赖您在代码中编写的控制器。你可以试试这个选择

<!DOCTYPE html>
<html ng-app="exampleApp" >
    <head>
        <meta charset="utf-8">
        <title>ng app</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
        <script>
            var myApp = angular.module('exampleApp', []);
            myApp.directive('highlight', function(){
                return function (scope, element, attrs) {
                    console.log(scope.$root.list);
                }
            });

        myApp.run(function($rootScope){
           $rootScope.list = [1,2,3];
        });
        </script>
    </head>
    <body>
        <highlight listdata="$parent.list"></highlight>
    </body>
</html>


ng应用程序
var myApp=angular.module（'exampleApp'，[]）；
myApp.directive（'highlight'，function（）{
返回函数（范围、元素、属性）{
console.log（scope.$root.list）；
}
});
myApp.run（函数（$rootScope）{
$rootScope.list=[1,2,3]；
});

“从具有隔离作用域的angular指令获取变量”，这是否意味着您希望在其他组件中的某个位置访问它？不完全是这样。我正在为推广这个组件搭建垫脚石。我希望这样做的原因是，在内部

和

标记中没有来自控制器的依赖项，因为数据将通过指令属性注入。因此，您不希望通过指令属性注入数据，这意味着它不是来自您的控制器或根范围？因此，您的意思是，

data options=“vc.allCountries”

不起作用？它会起作用，但您不会从控制器传递vc.allCountries值，而是直接引用$rootScope传递它。您可以在angular.config中编写一些内容并将其传递给此目录我不确定是否要将这些内容放在根作用域中。你还有其他想法吗？我们可以使用$transclude。检查这个plunkr，它会给你一个不同的方法。请考虑只查看PULKR中的指令部分，因为它也有一些控制器。

<optgroup ng-repeat="(continent, countries) in vc.allCountries" label="{{continent}}">

<!DOCTYPE html>
<html ng-app="exampleApp" >
    <head>
        <meta charset="utf-8">
        <title>ng app</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
        <script>
            var myApp = angular.module('exampleApp', []);
            myApp.directive('highlight', function(){
                return function (scope, element, attrs) {
                    console.log(scope.$root.list);
                }
            });

        myApp.run(function($rootScope){
           $rootScope.list = [1,2,3];
        });
        </script>
    </head>
    <body>
        <highlight listdata="$parent.list"></highlight>
    </body>
</html>