は、コントローラ機能のカスタムディレクティブから値を取得する - AngularJS

私は、次のコードを持って、私は、コントローラ機能でカスタムディレクティブからNGモジュールの値を受信したい：は、コントローラ機能のカスタムディレクティブから値を取得する - AngularJS

のgetName機能が機能する場合であります私は価値を得ようとしています。

'use strict'; 

angular 
.module('app', []) 
.controller("Controller", function ($scope) { 
$scope.getName = function() { 
return $scope.name; 
}; 
}) 
.controller("EditController", function($scope) { 
$scope.editingMode = true; 
}) 
.directive("newName", function ($parse) { 
return { 
template: 'Write name: <input type="text" ng-model="name">' 
}; 
}); 


<html ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Angular</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 

    <div ng-controller="Controller"> 
     <h1>Hello, {{ getName() }}</h1> 

     <div ng-controller="EditController"> 
     <new-name ng-show="editingMode"></new-name> 
     </div> 
    </div> 

    </body> 
</html>

誰かが私を助けることができますか？

出典

2017-09-26 Hector Manuel Cabrera Villa

あなたgetName()機能がname変数（JSプロトタイプ継承）を上書きparentコントローラとあなたの子供のコントローラである。、

あなたは上書き避けるためにバインド（use dot(.) in your bindingsに）あなたの親スコープのプロパティをモデル化する必要があります。また、restrict typeディレクティブを定義し、親HTMLから変数を渡す必要があります。以下

ここで働いているコード：

angular 
 
    .module('app', []) 
 
    .controller("Controller", function($scope) { 
 
    $scope.name = { 
 
     n: '' 
 
    } 
 
    $scope.getName = function() { 
 
     return $scope.name.n; 
 
    }; 
 
    }) 
 
    .controller("EditController", function($scope) { 
 
    $scope.editingMode = true; 
 
    }) 
 
    .directive("newName", function($parse) { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     name: '=', 
 
     }, 
 
     template: 'Write name: <input type="text" ng-model="name">' 
 
    }; 
 
    });

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

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="Controller"> 
 
    <h1>Hello, {{ getName()}}</h1> 
 
    <div ng-controller="EditController"> 
 
     <new-name ng-show="editingMode" name="name.n"></new-name> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

FurtherIは、あなたのコード内の2つのコントローラの必要がない提案は、1はしかし十分ですし、あまりにもあなたの問題を解決します。

出典

2017-09-26 04:28:53 anoop

この

<div ng-controller="Controller"> 
     <h1>Hello, {{ name }} </h1> 

     <div ng-controller="EditController"> 
      <new-name ng-show="editingMode" name="name"></new-name> 
     </div> 
    </div> 
angular 
    .module('app', []) 
    .controller("Controller", ['$scope' , function ($scope) { 
     $scope.getName = function (name) { 
      return $scope.name = name; 
     }; 

    }]) 
    .controller("EditController", function ($scope) { 
     $scope.editingMode = true; 
     $scope.$watch('name', function (newVal, oldVal) { 
      $scope.getName(newVal); 
     }); 
    }) 
    .directive("newName", function() { 

     return { 
      transclude :true, 
      restrict: 'E', 
      scope: { 
       name: '=', 
      }, 
      template: 'Write name: <input type="text" ng-model="name" >' 
     }; 
    });

をお試しください

出典

2017-09-26 05:23:47 yesIcan

は、コントローラ機能のカスタムディレクティブから値を取得する - AngularJS

答えて

関連する問題