Как получить доступ к сфере действия от контроллера к пользовательской директиве в Angular?

Я изучаю Angular сейчас, и я нахожусь в уроке директивы. И я делаю некоторые упражнения для себя, но у меня есть проблема.Как получить доступ к сфере действия от контроллера к пользовательской директиве в 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

источник

2015-06-26 Jerielle

Ваша проблема, туманно, здесь:

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 
     }); 
    } 
    }

(Ни один из этого кода не проверяется.)

источник

2015-06-26 03:29:30 Malvolio

Поведение описано правильно, но я считаю, 'объем: true' создает дочернюю область, а изолированная сфера относится к области: {} ' – Icycool

@Icycool - то, что вы говорите, звучит правильно. OP, почему бы вам не экспериментировать с различными возможностями и не отчитываться? – Malvolio

вы также можете использовать изолировать объем и использование «=» в объеме, который обеспечивает вам два способа связывания в вашей директиве, как, как показано ниже

<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

источник

2015-06-26 03:46:48

Самый простой способ достичь вас задачи является

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}}" 
    };

источник

2015-06-26 04:12:23

Ну вы можете достичь того же вещи, используя связывание два пути данных изолированного прицела.

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

источник

2015-06-26 05:25:40

Как получить доступ к сфере действия от контроллера к пользовательской директиве в Angular?

ответ

Смежные вопросы