Question

我现在正在学习Angular，我正在上指导课。我正在为自己做一些运动，但我有一个问题。

我创建了一个客户指令，我想要的是用户将在文本框中输入任何文本，然后输入中的文本将显示在我的自定义指令中。

右弓我仍然没有得到它。

这是我的一些代码：

 <body ng-app="myApp">
    <div class="container" ng-controller="MainCtrl">
      <h3>Directive</h3>
      <div class="form-group">
        <label>Type text: </label>
        <input type="text" class="form-control" ng-model="greet_value" />
        <p>Value <div flx-greet-me></div></p>
      </div>
    </div>
  </body>

我的指示：

var myApp = angular.module('myApp',[]);

myApp.controller('MainCtrl', function(){
  //some codes here
})
.directive('flxGreetMe', function() {

  var html_template = '<h1>' + $scope.greet_value + '</h1>';

  return {
    replace: true,
    restrict: 'AE',
    scope: true,
    template: html_template
  }

});

你能帮我解决这个问题吗？我仍然是Angular的新人。

这是plnkr：

http://plnkr.co/edit/AugJkl?p=preview

Answer 1

你的问题不明确，在这里：

scope: true,

这样做是将此指令范围与其他所有内容隔离开来。您可以删除它，然后执行此操作：

 return {
    replace: true,
    restrict: 'AE',
    template: html_template,
    controller : function($scope) {
       $scope.$watch("greet_value", function(greet_value) {
         // whatever you like
       });
    }
  }

或者您可以将其保留并手动访问父作用域，如下所示：

 return {
    replace: true,
    restrict: 'AE',
    template: html_template,
    scope: true,
    controller : function($scope) {
       $scope.$parent.$watch("greet_value", function(greet_value) {
         // whatever you like
       });
    }
  }

或者您可以通过编写如下视图来使其更灵活：

    <p>Value <div flx-greet-me="greet_value"></div></p>

然后

 return {
    replace: true,
    restrict: 'AE',
    template: html_template,
    scope: true,
    controller : function($attrs) {
       $attrs.flxGreetMe.$observe(function(arg_value) {
         // whatever you like
       });
    }
  }

（此代码均未经过测试。）

Answer 2

您也可以使用隔离范围并使用＆＃39; =＆＃39;在您的指令中为您提供双向绑定的范围，如下所示

  <input type="text" ng-model="val"/>
  <p  value="val"></p>  

    return {
    replace: true,
    transclue: true,
    scope:{

     value = "="

     },
     template : "<div>value</div>"

参考：https://docs.angularjs.org/guide/directive

Answer 3

实现任务的最简单方法是

<强> HTML

    <p><input type="text" ng-model="inputValue" ng-keyup="setDirectiveValue(inputValue)"></p>
    <p><div my-directive></div></p>

    <script src="libs/angular-1.3.15/angular.min.js"></script>
    <script src="scripts/ctrlToDirectiveApp.js"></script>

<强> ctrlToDirectiveApp

var myApp = angular.module("ctrlToDirective",[]);

myApp.controller("myCtrl", function($sce, $window, $scope){

    $scope.myDirectiveValue = "";

    $scope.setDirectiveValue = function(directiveValue){
        console.log(directiveValue);
        $scope.$watch(function(){
            $scope.myDirectiveValue = directiveValue;

        })
        console.log($scope.myDirectiveValue);
    };

})

myApp.directive("myDirective",function(){

    return {
        restrict: 'AE',
        template : "Hello {{myDirectiveValue}}"
    };

Answer 4

使用隔离范围的双向数据绑定，您可以实现相同的功能。

JS：

myApp.controller('MainCtrl', function($scope){
  //some codes here
  $scope.greet_value = "Please change text"
})
.directive("flxGreetMe", function() {

  return {
    replace: true,
    restrict: 'AE',
    scope : {test : "="},
    template: '<h1>{{test}}</h1>' 
  }  

});

HTML：

<div flx-greet-me  test="greet_value" >
           </div>

以下是plunker

如何在Angular中从控制器访问范围到自定义指令？

4 个答案: